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 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
js实现时分秒倒计时
Dec 03 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
JAVA/JSP学习系列之七
2006/10/09 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
python实现图片彩色转化为素描
2019/01/15 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
年会搞笑主持词串词
2014/03/24 职场文书
室内设计专业自荐信
2014/05/31 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
主持人开场白台词
2015/05/29 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python