一个jQuery插件,提供定时器以下类型:
1.单运行定时器(又名的setTimeout)
2.反复运行定时器(又名的setInterval)
3.立即运行一个重复的运行计时器,然后等待的时间间隔。
4.反复运行,一定的间隔定时器(见下文睡眠选项)。
5.反复运行,一定的间隔计时器,将立即运行,然后等待睡眠时间。
为什么你会使用这个库与常规的setTimeout? 因为它提供了大量的
附加功能! 例如:
- 自动定时器ID跟踪。
- 暂停和继续后定时器。
- 独特的计时器,如果你启动一个定时器两次意思,第一个是
自动清零。
- 米利斯指定数量后,自动停止计时器。
- 当相关的元素被从DOM除去自动计时器的去除。
- 多个,每个元素命名计时器。
- 在“这个”变量是在你的定时功能可用。
- 简单地返回false从定时器功能取消计时器。
- 一个jQuery般的界面更清晰的代码。
- 允许参数传递在这两个所有的浏览器,包括IE通常不传递参数很好
- 返回定时器选项,它提供了访问定时器功能等
这里有一个例子。 假设你想一个函数来运行用户时
滚动网页。 但是,你只需要当用户运行它
*完成*滚动,而不是那个被滚动的每一个像素。 由于powertimers
自动清除的元素较早定时器,只需启动一个新的计时器
滚动的事件。 该功能将* *只运行一次用户已停止
滚动500毫秒。
$(window).scroll(function() { $(document).powerTimer({ delay: 500, name: ‘scroll watcher‘, func: function() { // this will run only after the user has stopped scrolling for 500ms }, }); });
有几件事情用定时器和这个插件时,要牢记:
1.如果给定的JQuery阵列中有多个元素,一个定时器将被置
在* *每一个元素。 换句话说,如果你的数组包含两个<div>元素,
你会得到两个定时器运行,每个格。 你可能希望
使用JQuery的阵列与像文档或基于ID的单个元件
选择器:$(‘#身份证‘)powerTimer(),所以你得到一个计时器。
2.使用一个jQuery风格的对象{}来设置定时器的选项:
$(‘#myid‘).powerTimer({ name: ‘mytimer‘, sleep: 1000, func: function() { console.log(‘Run with element: ‘ + this); }, });
3.如果您删除已运行连接到他们的计时器DOM元素,
该插件会自动清除计时器。
4.“这个”变量是你的函数调用过程中设置相关的DOM元素,
以同样的方式JQuery的事件工作。 见#2上面的例子。
5.通常情况下,你只需要连接到一个元素一个定时器,所以没有理由
命名计时器(它只是使用默认名称)。 如果你需要额外的计时器
一个元素,你可能想他们的名字,所以你可以停止/暂停/继续
独立计时器。
7. .powerTimer(“暂停”),并.powerTimer(‘继续‘)做异步的时候真的很有用
Ajax调用。 暂停计时器,当AJAX调用时,再继续它
当响应回来。
看到的选项,在注释详细的可用选项的代码开始。
例如:设置一个计时器来运行一次,在2秒钟内:
<div id="someid">Element here</div> <script> $(‘#someid‘).powerTimer({ delay: 2000, params: { first: 1, second: ‘text‘, }, func: function(params) { // do something with params.first and params.second here. }, }); </script>
例如:设置一个计时器反复在5秒确切的时间间隔运行:
<div id="someid">Element here</div> <script> $(‘#someid‘).powerTimer({ interval: 5000, func: function() { console.log(‘Running‘); }, }); </script>
例如:设置一个计时器,反复运行,每2秒,立即
初始运行。 下面的说明,然而,因为函数删除元素
从第一次运行该文件,计时器只运行一次。
计时器从队列中清除,并永远不会再运行。
<div id="someid">Element here</div> <script> $("#someid").powerTimer({ intervalAfter: 2000, func: function() { console.log(‘Running.‘); $(this).remove(); }, }); </script>
例如:设置一个定时器来与端之间恰好3秒运行
以前的调用和下一个开始。 例如,如果定时器
功能需要1秒的运行,定时器将运行每4秒。
这是不同于JavaScript的setInterval的,因为这种方法ensurse
这3秒运行之间传递,无论多长时间的运行功能需要。
<div id="someid">Element here</div> <script> $("#someid").powerTimer({ sleepAfter: 3000, func: function() { console.log(‘Running.‘); // 3秒计时器,在该函数的*结束*再次启动, //保证处理器不会被盯住。 我们知道一个特定的 //的时间将呼叫之间失效。 }, });
例如:清除匹配的元素(S)上的任何计时器(S)。
<div id="someid"></div> <script> $(‘#someid‘).powerTimer(‘stop‘); </script>
例如:暂停定时器。 这比停止,因为一个计时器不同
呼吁“继续”将再次运行使用相同的选项的计时器。
<button id="btn">Pause</button> <script> var start = new Date().getTime(); $(‘#btn‘).powerTimer({ intervalAfter: 1000, func: function() { console.log(new Date().getTime() - start); }, }).click(function() { if ($(this).text() == ‘paused‘) { $(this).powerTimer(‘continue‘).text(‘pause‘); }else{ $(this).powerTimer(‘pause‘).text(‘paused‘); } }); </script>
例如:一个Ajax调用,以运行信息使用过程中暂停计时。
<button id="btn">Go</button> <script> $(‘#btn‘).powerTimer({ intervalAfter: 100, params: { next_ajax: 1 }, func: function(params) { //做一些事情每1/10秒 // ping服务器每隔60秒 if (new Date().getTime() > params.next_ajax) { $(this).powerTimer(‘pause‘); // 暂停处理,直到ajax的回报 this == the button $.ajax({ ... success: function() { //做一些与Ajax响应 //从现在开始将下一个ajax 60秒 params.next_ajax = new Date().getTime() + 60000; $(‘#btn‘).powerTimer(‘continue‘); // continue the interface update } }); } }, }); </script>
例如:两个计时器在相同的元素。 以下将仅运行所述第二
计时器,因为它覆盖了一个版画“第一”。 如果你真的想2
文档元素的计时器,他们需要有不同的名称(下面的例子)。
<script> $(document).powerTimer({ interval: 1000, func: function(params) { console.log(‘first‘); }, }); $(document).powerTimer({ interval: 1000, func: function(params) { console.log(‘second‘); }, }); </script>
例如:两个定时器,具有不同的名称。 双方将同时运行。 因为他们
有不同的名称,所述第二不覆盖所述第一,即使它们都
在相同的元件。
<script> $(document).powerTimer({ interval: 1000, name: ‘first timer‘, func: function(params) { console.log(‘first‘); }, }); $(document).powerTimer({ interval: 1000, name: ‘second timer‘, func: function(params) { console.log(‘second‘); }, }); </script>