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获取当前地理位置方法汇总
Dec 18 Javascript
详解javascript数组去重问题
Nov 06 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
domReady的实现案例
Nov 23 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
js实现石头剪刀布游戏
Oct 11 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
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
JS模式之单例模式基本用法
2015/06/30 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
使用Kivy将python程序打包为apk文件
2017/07/29 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Python通过字典映射函数实现switch
2020/11/06 Python
公司员工的自我评价范例
2013/11/01 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
中文专业自荐书
2014/06/29 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
滞留工资返还协议书
2014/10/19 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
维稳工作情况汇报
2014/10/27 职场文书
安全保证书
2015/01/16 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
公开致歉信
2019/06/24 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
MySQL 计算连续登录天数
2022/05/11 MySQL
基于docker安装zabbix的详细教程
2022/06/05 Servers