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 相关文章推荐
javascript数组的扩展实现代码集合
Jun 01 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
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
用session做客户验证时的注意事项
2006/10/09 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
详解angular element()方法使用
2017/04/08 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
python tkinter实现界面切换的示例代码
2019/06/14 Python
python代码编写计算器小程序
2020/03/30 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python之yield和Generator深入解析
2019/09/18 Python
Python字典底层实现原理详解
2019/12/18 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Python类及获取对象属性方法解析
2020/06/15 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
关爱空巢老人感想
2015/08/11 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技