提示框弹窗类 Facebox Facebox 是一个基于jQuery,Facebook-style的lightbox。能够展示示images,divs或者整个远程页面 。 Facebox SimpleModal SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。 SimpleModal…
September 17, 2014
实现数据库实时更新 jQuery Timers 编辑
精选名称: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 ([计时器名称], [函式名称])
说明:
/************************************************************* * 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:
$("#close-button").click(function() { $(this).oneTime(1000, function() { $(this).parent(".main-window").hide(); }); }); $("#cancel-button").click(function() { $("#close-button").stopTime(); });
示例2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple Time Interval Page Element Refresh using JQuery and a sprinkle of Ajax</title> <script language="javascript" src="jquery-1.2.6.min.js"></script> <script language="javascript" src="jquery.timers-1.0.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ var j = jQuery.noConflict(); j(document).ready(function() { j(".refreshMe").everyTime(1000,function(i){ j.ajax({ url: "refresh-me.php", cache: false, success: function(html){ j(".refreshMe").html(html); } }) }) }); j('.refreshMe').css({color:"red"}); }); </script> </head> <body> <div class="refreshMe">This will get Refreshed in 1 Seconds</div> </body> </html>
下载: