`
天梯梦
  • 浏览: 13764485 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

实现数据库实时更新 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>
 

 

分享到:
评论
3 楼 shaolei583 2014-01-02  
正要使用。谢谢分享
2 楼 天梯梦 2011-02-16  
有帮助就好~
1 楼 qiuyujia 2011-02-16  
不错啊,学习了:)

相关推荐

    jQueryTimers

    jQuery Timers 是一款专为 jQuery 设计的插件,它扩展了原生JavaScript中的setTimeout和setInterval函数,提供了更方便、更强大的定时器管理功能。这个插件的主要目的是简化在JavaScript和jQuery应用中处理定时任务...

    jQuery Timers - jQuery定时器插件

    jQuery Timers - jQuery定时器插件

    jquery_timers实现带暂停功能的全屏相册实例源码

    《jQuery Timers 实现带暂停功能的全屏相册实例详解》 在Web开发中,全屏相册是一种常见的交互设计,它能够为用户提供沉浸式的浏览体验。在本实例中,我们将探讨如何利用jQuery Timers库来实现一个具有暂停功能的...

    jquery.timers.js

    - **动画效果**:定期更新CSS属性,实现平滑的动画效果。 - **数据轮询**:周期性地向服务器发送请求,获取实时数据。 - **用户交互**:根据用户行为触发特定事件,如计时提示、计时结束等。 ### 结语 jQuery ...

    jquery.timers-1.2.js

    jquery.timers-1.2.js 定时器插件

    jquery网页静止自动执行jquery.timers

    在实际应用中,你可能需要结合`jQuery Timers`与其他jQuery方法或API一起使用,例如Ajax请求,以实现后台轮询服务: ```javascript $("#element").everyTime(5000, function(index) { $.ajax({ url: "/api/...

    Jquery+timers插件实现图片轮转

    在本案例中,我们将探讨如何利用jQuery结合timers插件实现图片轮转的效果,这是一种常见的网页动态展示技术,常用于产品展示、广告轮播等场景。 首先,理解jQuery的核心概念至关重要。jQuery提供了一种简洁的API,...

    jQuery timers定时器

    jQuery timers定时器简单易懂。。 直接调用,时间设置可以自己修改

    jquery_timers实现带暂停功能的全屏相册

    jquery_timers实现带暂停功能的全屏相册 /* http://www.haogongju.net/art/1036242 jQuery Timers 是一个用来封装 setTimeout 和 setInterval 方法的 jQuery 定时器插件。 提供了三个函式 1. everyTime(时间间隔, ...

    C# 定时更新程序(支持Access数据库更新)

    标题 "C# 定时更新程序(支持Access数据库更新)" 涉及到的核心技术是C#编程语言以及数据库管理,特别是与Access数据库的交互。C#是一种面向对象的编程语言,广泛应用于Windows应用程序开发,包括桌面应用和服务器端...

    jquery.timer.js

    Timer.js广泛应用于各种场景,如倒计时、自动轮播、实时数据更新等。例如,在一个倒计时应用中,你可以这样做: ```javascript var end = new Date("Dec 31, 2022 23:59:59").getTime(); var myCountdown = $.timer...

    jquery图片轮显

    - `js/jquery.timers-1.1.2.js`:扩展jQuery的定时器功能。 - `js/jquery.photoplayer_min.js`:可能是一个图片播放器插件。 - `js/jquery.photoshower_min.js`:可能是另一个图片展示插件。 - `js/jquery.min....

    c#在odb.net下实现数据库从mysql->oracle迁移

    标题中的“c#在odb.net下实现数据库从mysql-&gt;oracle迁移”表明了本文将探讨如何使用C#编程语言,借助ODBC(Open Database Connectivity)驱动,来实现在.NET Framework 2008环境下构建一个Windows Forms应用程序,...

    30个jquery经典Demo

    11. **计时器(Timers)**:`.setInterval()`和`.clearInterval()`实现定时执行任务,如倒计时或定时更新内容。 12. **事件委托(Event Delegation)**:利用`.on()`方法进行事件委托,提高性能,尤其在处理动态...

    Jquery实现无缝隙上下左右滚动,超简便代码

    4. **定时器(Timers)**:为了实现自动滚动,可以使用`setInterval()`或`setTimeout()`函数。设置适当的间隔时间,使元素在特定时间内自动滑动。 5. **回调函数(Callback Functions)**:在动画完成后,可以使用...

    jquery 插件集合

    jquery 及其插件集合 包含 AddTxtToCaret:添加文本到光标位置 ...jquery.timers-1.2:计时器 jquery.treeview:树形菜单 jquery.uploadify.v2.1.4:多文件上传 jquery-ui-1.8.16.custom.min:jquery UI插件

Global site tag (gtag.js) - Google Analytics