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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
javascript 常用代码技巧大收集
Feb 25 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
微信小程序的mpvue框架快速上手指南
May 15 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php实现简易计算器
2020/08/28 PHP
utf8的编码算法 转载
2006/12/27 Javascript
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
JS验证字符串功能
2017/02/22 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
Vue scoped及deep使用方法解析
2020/08/01 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python list格式数据excel导出方法
2018/10/31 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
UNIX特点都有哪些
2016/04/05 面试题
销售文员岗位职责
2013/11/29 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
工作作风建设心得体会
2014/10/22 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
2015年度物流工作总结
2015/04/30 职场文书
《假如》教学反思
2016/02/17 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL