JQuery PowerTimer 插件详解

一个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>