专栏首页王磊的博客jQuery 计时器(jquery timers)简单应用

jQuery 计时器(jquery timers)简单应用

jquery timers 代码(版本1.2):

/**
 * jQuery.timers - Timer abstractions for jQuery
 * Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
 * Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
 * Date: 2009/10/16
 *
 * @author Blair Mitchelmore
 * @version 1.2
 *
 **/

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },
    stopTime: function(label, fn) {
        return this.each(function() {
            jQuery.timer.remove(this, label, fn);
        });
    }
});

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",
        regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
        powers: {
            // Yeah this is major overkill...
            'ms': 1,
            'cs': 10,
            'ds': 100,
            's': 1000,
            'das': 10000,
            'hs': 100000,
            'ks': 1000000
        },
        timeParse: function(value) {
            if (value == undefined || value == null)
                return null;
            var result = this.regex.exec(jQuery.trim(value.toString()));
            if (result[2]) {
                var num = parseFloat(result[1]);
                var mult = this.powers[result[2]] || 1;
                return num * mult;
            } else {
                return value;
            }
        },
        add: function(element, interval, label, fn, times) {
            var counter = 0;
            
            if (jQuery.isFunction(label)) {
                if (!times) 
                    times = fn;
                fn = label;
                label = interval;
            }
            
            interval = jQuery.timer.timeParse(interval);

            if (typeof interval != 'number' || isNaN(interval) || interval < 0)
                return;

            if (typeof times != 'number' || isNaN(times) || times < 0) 
                times = 0;
            
            times = times || 0;
            
            var timers = jQuery.data(element, this.dataKey) || jQuery.data(element, this.dataKey, {});
            
            if (!timers[label])
                timers[label] = {};
            
            fn.timerID = fn.timerID || this.guid++;
            
            var handler = function() {
                if ((++counter > times && times !== 0) || fn.call(element, counter) === false)
                    jQuery.timer.remove(element, label, fn);
            };
            
            handler.timerID = fn.timerID;
            
            if (!timers[label][fn.timerID])
                timers[label][fn.timerID] = window.setInterval(handler,interval);
            
            this.global.push( element );
            
        },
        remove: function(element, label, fn) {
            var timers = jQuery.data(element, this.dataKey), ret;
            
            if ( timers ) {
                
                if (!label) {
                    for ( label in timers )
                        this.remove(element, label, fn);
                } else if ( timers[label] ) {
                    if ( fn ) {
                        if ( fn.timerID ) {
                            window.clearInterval(timers[label][fn.timerID]);
                            delete timers[label][fn.timerID];
                        }
                    } else {
                        for ( var fn in timers[label] ) {
                            window.clearInterval(timers[label][fn]);
                            delete timers[label][fn];
                        }
                    }
                    
                    for ( ret in timers[label] ) break;
                    if ( !ret ) {
                        ret = null;
                        delete timers[label];
                    }
                }
                
                for ( ret in timers ) break;
                if ( !ret ) 
                    jQuery.removeData(element, this.dataKey);
            }
        }
    }
});

jQuery(window).bind("unload", function() {
    jQuery.each(jQuery.timer.global, function(index, item) {
        jQuery.timer.remove(item);
    });
});

jQuery Timers插件地址:

http://plugins.jquery.com/project/timers

下面来自JavaEye论坛的JQuery Timers应用知识

提供了三个函式 1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成]) 2. oneTime(时间间隔, [计时器名称], 呼叫的函式) 3. stopTime ([计时器名称], [函式名称])

/*************************************************************  *   everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])  *************************************************************/

//每1秒执行函式test() function test(){    //do something... } $('body').everyTime('1s',test); //每1秒执行 $('body').everyTime('1s',function(){  //do something... }); //每1秒执行,并命名计时器名称为A $('body').everyTime('1s','A',function(){  //do something... }); //每20秒执行,最多5次,并命名计时器名称为B $('body').everyTime('2das','B',function(){  //do something... },5); //每20秒执行,无限次,并命名计时器名称为C //若时间间隔抵到,但函式程序仍未完成则需等待执行函式完成后再继续计时 $('body').everyTime('2das','C',function(){     //执行一个会超过20秒以上的程式 },0,true); /***********************************************************  *   oneTime(时间间隔, [计时器名称], 呼叫的函式)  ***********************************************************/ //倒数10秒后执行 $('body').oneTime('1das',function(){  //do something... }); //倒数100秒后执行,并命名计时器名称为D $('body').oneTime('1hs','D',function(){  //do something... }); /************************************************************  *  stopTime ([计时器名称], [函式名称])  ************************************************************/ //停止所有的在$('body')上计时器 $('body').stopTime (); //停止$('body')上名称为A的计时器 $('body').stopTime ('A'); //停止$('body')上所有呼叫test()的计时器 $('body').stopTime (test);

自定义时间单位 打开源代码 找到 powers: {    // Yeah this is major overkill...    'ms': 1,    'cs': 10,    'ds': 100,    's': 1000,    'das': 10000,    'hs': 100000,    'ks': 1000000   } 可以定制自己想要的了!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js节流函数和js防止重复提交的N种方法

    Java中文社群_老王
  • js节流函数和js防止重复提交的N种方法

    应用情景 经典使用情景:js的一些事件,比如:onresize、scroll、mousemove、mousehover等; 还比如:手抖、手误、服务器没有响应之...

    Java中文社群_老王
  • 检索COM类工厂中CLSID为{00024500-0000-0000-C000-000000000046}的组件时失败

    具体解决方法如下: 1:在服务器上安装office的Excel软件; 2:在"开始"->"运行"中输入dcomcnfg.exe启动"组件服务"; 3:依次双击"...

    Java中文社群_老王
  • 神秘的Waymo一反常态,CVPR现场发布大型自动驾驶数据集

    目前,自动驾驶领域已经出现很多数据集,例如 KITTI、Oxford、Cityscape、nuScenes、BDD100K 等。

    机器之心
  • C++20 Coroutine

    最近的新闻里 C++20 已经确认的内容里已经有了协程组件,之前都是粗略看过这个协程草案。最近抽时间更加系统性的看了下接入和实现细节。

    owent
  • 《你不知道的JavaScript》:this 绑定规则的优先级

    前面两篇讲了this的调用位置影响和绑定规则,在一般情况下想要弄清this的指向,只需找到函数的调用位置和并判断应当应用哪条绑定规则即可。但有时会出现某个调用位...

    前端_AWhile
  • 基于QMP实现对qemu虚拟机进行交互

    qemu对外提供了一个socket接口,称为qemu monitor,通过该接口,可以对虚拟机实例的整个生命周期进行管理,主要有如下功能

    小慢哥Linux运维
  • ES6函数res参数和ES5函数参数(arguments)

    在JavaScript ES5中我们可以使用arguments对象获取参数的所有

    十月梦想
  • 数据猿独家 | 零售大数据公司普丘信息系统获数百万元天使轮融资

    数据猿独家获悉,普丘信息系统已于近期完成数百万人民币天使轮融资,其投资方为香港Axis Business Consulting公司,其联合创始人兼COO陈涛透露...

    数据猿
  • 特征工程系列:特征预处理(下)

    关于作者:JunLiang,一个热爱挖掘的数据从业者,勤学好问、动手达人,期待与大家一起交流探讨机器学习相关内容~

    木东居士

扫码关注云+社区

领取腾讯云代金券