Jquery实现数据实时更新 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 ([计时器名称], [函式名称]) 说明： 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.