jQuery timers计时器简单应用说明


Posted in Javascript onOctober 28, 2010

因为方便嘛,Jquery已封装JS的setTimeout 和 setInterval 方法,下面看下应用例子:

/** 
* 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); 
}); 
});

JS Code
$("#close-button").click(function() { 
$(this).oneTime(1000, function() { 
$(this).parent(".main-window").hide(); 
}); 
}); 
$("#cancel-button").click(function() { 
$("#close-button").stopTime(); 
});

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 
}

可以定制自己想要的了!
Javascript 相关文章推荐
JS拖动技术 关于setCapture使用
Dec 09 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
jquery ajax abort()的使用方法
Oct 28 #Javascript
BOM与DOM的区别分析
Oct 26 #Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 #Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 #Javascript
基于jquery的给文章加入关键字链接
Oct 26 #Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 #Javascript
自写的一个jQuery圆角插件
Oct 26 #Javascript
You might like
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
浅谈php冒泡排序
2014/12/30 PHP
php生成二维码
2015/08/10 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python字符串替换实例分析
2015/05/11 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
计算机专业个人求职信范例
2013/09/23 职场文书
实习生的自我评价
2014/01/08 职场文书
求职信怎么写
2014/05/23 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
董事长秘书工作总结
2015/08/14 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
公司与个人合作协议书
2016/03/19 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers