精选名称:JQuery Timers
授权模式:WTFPL
官方网页:http://jquery.offput.ca/every/
官方展示:http://jquery.offput.ca/every/
底端
有时候必需定时做一个动作,像是每n秒透过ajax发送讯息伺服器,取得更新资讯。
一般的方式是使用Javascript的原生计时器函式 clearInterval、clearTimeout、setInterval、setTimeout,
不过原生函式在使用上不太直觉,而且无法快速的 指定套用在某个特定的网页元素,
另外他的间隔单位是以毫秒去计算(1秒=1000毫秒),嗯…我想要每5分钟做一次,
那我要设 定…60*60*1000=3600000秒…对吧?还是360000秒?
这时候快从哆啦B梦口袋拿出了JQuery Timers这个法宝就能解决这麻烦的问题。
JQuery Timers提供了三个函式
1. everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])
2. oneTime(时间间隔, [计时器名称], 呼叫的函式)
3. stopTime ([计时器名称], [函式名称])
说明:
Js代码
1./*************************************************************
2. * everyTime(时间间隔, [计时器名称], 函式名称, [次数限制], [等待函式程序完成])
3. *************************************************************/
4.
5.//每1秒执行函式test()
6.function test(){
7. //do something...
8.}
9.$('body').everyTime('1s',test);
10.
11.//每1秒执行
12.$('body').everyTime('1s',function(){
13. //do something...
14.});
15.
16.//每1秒执行,并命名计时器名称为A
17.$('body').everyTime('1s','A',function(){
18. //do something...
19.});
20.
21.//每20秒执行,最多5次,并命名计时器名称为B
22.$('body').everyTime('2das','B',function(){
23. //do something...
24.},5);
25.
26.//每20秒执行,无限次,并命名计时器名称为C
27.//若时间间隔抵到,但函式程序仍未完成则需等待执行函式完成后再继续计时
28.$('body').everyTime('2das','C',function(){
29. //执行一个会超过20秒以上的程式
30.},0,true);
31.
32./***********************************************************
33. * oneTime(时间间隔, [计时器名称], 呼叫的函式)
34. ***********************************************************/
35.//倒数10秒后执行
36.$('body').oneTime('1das',function(){
37. //do something...
38.});
39.
40.//倒数100秒后执行,并命名计时器名称为D
41.$('body').oneTime('1hs','D',function(){
42. //do something...
43.});
44.
45./************************************************************
46. * stopTime ([计时器名称], [函式名称])
47. ************************************************************/
48.//停止所有的在$('body')上计时器
49.$('body').stopTime ();
50.
51.//停止$('body')上名称为A的计时器
52.$('body').stopTime ('A');
53.
54.//停止$('body')上所有呼叫test()的计时器
55.$('body').stopTime (test);
56.如果你试著打开他的原始码,你可以发现下列这段程式码,正是时间间隔的字串缩写,所以我们也可以自订自己所需要的缩写字串,像是分,时之类的
57.// Yeah this is major overkill...
58.'ms': 1,
59.'cs': 10,
60.'ds': 100,
61.'s': 1000,
62.'das': 10000,
63.'hs': 100000,
64.'ks': 1000000,
65.//自订单位
66.'m': 60000,
67.'h': 360000
/*************************************************************
* 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);
如果你试著打开他的原始码,你可以发现下列这段程式码,正是时间间隔的字串缩写,所以我们也可以自订自己所需要的缩写字串,像是分,时之类的
// Yeah this is major overkill...
'ms': 1,
'cs': 10,
'ds': 100,
's': 1000,
'das': 10000,
'hs': 100000,
'ks': 1000000,
//自订单位
'm': 60000,
'h': 360000
示例1:
Java代码
1.$("#close-button").click(function() {
2. $(this).oneTime(1000, function() {
3. $(this).parent(".main-window").hide();
4. });
5.});
6.$("#cancel-button").click(function() {
7. $("#close-button").stopTime();
8.});
9.
10.
$("#close-button").click(function() {
$(this).oneTime(1000, function() {
$(this).parent(".main-window").hide();
});
});
$("#cancel-button").click(function() {
$("#close-button").stopTime();
});
示例2:
Java代码
1.
2.
3.
4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5.Simple Time Interval Page Element Refresh using JQuery and a sprinkle of Ajax
6.<script language="javascript" src="jquery-1.2.6.min.js"></script>
7.<script language="javascript" src="jquery.timers-1.0.0.js"></script>
8.
9.<script type="text/javascript">
10.
11.$(document).ready(function(){
12. var j = jQuery.noConflict();
13. j(document).ready(function()
14. {
15. j(".refreshMe").everyTime(1000,function(i){
16. j.ajax({
17. url: "refresh-me.php",
18. cache: false,
19. success: function(html){
20. j(".refreshMe").html(html);
21. }
22. })
23. })
24. });
25. j('.refreshMe').css({color:"red"});
26.});
27.
28.
29.
30.</script>
31.
32.
33.
This will get Refreshed in 1 Seconds
34.
35.
分享到:
相关推荐
NULL 博文链接:https://justcoding.iteye.com/blog/545893
jQuery Timers - jQuery定时器插件
jquery.timers-1.2.js 定时器插件
jquery_timers实现带暂停功能的全屏相册实例源码,供大家一起参考学习。
jQuery Timers 是一个用来封装 setTimeout 和 setInterval 方法的 jQuery 定时器插件。
jquery资源 ,jquery.timers定时器资源
NULL 博文链接:https://hsys.iteye.com/blog/621425
jQuery timers定时器简单易懂。。 直接调用,时间设置可以自己修改
jquery_timers实现带暂停功能的全屏相册 /* http://www.haogongju.net/art/1036242 jQuery Timers 是一个用来封装 setTimeout 和 setInterval 方法的 jQuery 定时器插件。 提供了三个函式 1. everyTime(时间间隔, ...
适用于网页自动执行去后台请求方法
jquery 及其插件集合 包含 AddTxtToCaret:添加文本到光标位置 ...jquery.timers-1.2:计时器 jquery.treeview:树形菜单 jquery.uploadify.v2.1.4:多文件上传 jquery-ui-1.8.16.custom.min:jquery UI插件
大家都知道jQuery很强大,也有很多效果很帅的插件,下面介绍下jQuery定时器插件jQuery Timers,那JS都自带有定时器,为什么要使用Jquery的呢?
一款优良的第三方库文件,大家多多支持,只需要2积分,谢打赏
提供了三个函式 1 everyTime 时间间隔 [计时器名称] 函式名称 [次数限制] [等待函式程序完成] 2 oneTime 时间间隔 [计时器名称] 呼叫的函式 3 stopTime [计时器名称] [函式名称] everyTime 时间间隔 [计时器...
实现了图片轮播功能,jquery插件名称为zoeDylan.ImgChange,图片路径、跳转链接、提示标题都是有动态数组来配置,jquery插件可灵活配置6个参数, height高、width宽、mgs图片地址、links点击地址、tips图片说明、...
timers定时器实现javascrip定时或按钮控制功能 floatbox浮动层实现javascript弹出浮动窗口功能 TableSearch表格搜索实现Javascript搜索表格内容功能 Datepicker日期选择器实现Javascript自定义日期格式选择功能 ...
先去官网下载jQuery Timers插件 ,然后引用到html中。这里是1.2 version 代码如下: [removed][removed] 然后是HTML,... 代码如下: ”hicurrenttime” runat=”server”> <h1> jQuery Timers Test</h1> <input typ
John Resig is an acknowledged JavaScript authority and the creator of the jQuery library. Bear Bibeault is a web developer and coauthor of Ajax in Practice, Prototype and Scriptaculous in Action, and ...