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>
时间: 2024-10-19 01:27:05

JQuery PowerTimer 插件详解的相关文章

用jQuery开发插件详解

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法.下面就两种函数的开发做详细的说明. 1.类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法.典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中.关于类级别的插件开发可以采用如下几种

jQuery Form插件详解

<script src="js/jquery.form.js" type="text/javascript"></script> Jquery Form Plugin是jquery最重要的插件之一,它利用AJAX技术在不引起页面刷新的情况下POST表单.主要有两个方法:ajaxform和 ajaxsubmit.它会自动收集表单元素内容,决定如何管理提交进程.这两个方法支持多重选择.我想AJAX方式的表单应用再没有比这个插件更简单易用的了. 先

jQuery lazyload插件详解

lazyload插件用于图片延迟加载,节省服务器带宽,减少服务器请求次数,提高网站的页面加载速度,用于网站性能优化,只有当图片在窗口可视范围内时才向服务器请求: 参数: threshold:设置距离窗口底部多少像素开始加载图片,提前加载图片, failure_limit:lazyload按照瀑布流加载图片,当找到(按照图片在DOM中的位置从上往下)第一张不在可视范围的图片后就停止检测延迟加载图片的位置 如上图,如果每个列表块包含两张图片,failure_limit为0时,当页面滚动到阴影位置时,

jQuery 事件用法详解

jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展. 在这里我会介绍 jquery 事件的一些比较基础的用法. 实现原理 jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attac

jQuery datepicker参数 详解

DatePicker支持鼠标点选日期,同时还可以通过键盘控制选择: page up/down - 上一月.下一月 ctrl+page up/down - 上一年.下一年 ctrl+home - 当前月或最后一次打开的日期 ctrl+left/right - 上一天.下一天 ctrl+up/down - 上一周.下一周 enter - 确定选择日期 ctrl+end - 关闭并清除已选择的日期 escape - 关闭并取消选择 实用功能: $.datepicker.setDefaults( set

Bootstrap transition.js 插件详解

Bootstrap transition.js 插件详解 时间 2015-01-27 12:12:00 博客园-原创精华区 原文  http://www.cnblogs.com/xyzhanjiang/p/4252513.html 主题 Bootstrap JavaScript Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡

jquery的css详解(二)

jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ style: function( elem, name, value, extra ) { // Don't set styles on text and comment nodes if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ||

jQuery选择器代码详解(四)——Expr.preFilter

原创文章,转载请注明出处,多谢! Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(rune

JQuery选择器代码详解(三)——tokenize方法

原创文章,转载请注明出处,多谢! /* * tokenize函数是选择器解析的核心函数,它将选择器转换成两级数组groups * 举例: * 若选择器为"div.class,span",则解析后的结果为: * group[0][0] = {type:'TAG',value:'div',matches:match} * group[0][1] = {type:'CLASS',value:'.class',matches:match} * group[1][0] = {type:'TAG'