├── .gitignore
├── README.md
├── demo
├── param-callback.html
├── param-fun.html
├── param-iCount.html
├── param-immediately.html
├── param-time.html
├── pay0.html
├── pay1.html
└── pay2.html
├── demo2
├── actived.html
├── callback.html
├── count-down.html
├── count.html
├── duration.html
├── hello.html
├── json.html
├── pause.html
├── quick.html
└── typist.html
├── favicon.ico
├── index.html
├── jquery-timer-2.0.0-min.js
├── jquery-timer-2.0.0.js
├── jquery-timer-min.js
├── jquery-timer.js
├── params.json
├── source
├── jquery-1.11.2.min.js
├── jquery-2.1.3.min.js
└── jquery-2.1.4.min.js
└── stylesheets
├── github-light.css
├── normalize.css
└── stylesheet.css
/.gitignore:
--------------------------------------------------------------------------------
1 | build
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | ## jQuery Timer
3 |
4 | - 新版修复了旧版的历史遗留问题,并且增加了更强大的功能,配置设计也更灵活。强烈建议升级到新版,旧版不再继续维护。
5 | - 欢迎检查新版 [DEMO](http://wwh447.github.io/jQueryTimer/#%E6%89%80%E6%9C%89%E7%A4%BA%E4%BE%8B),以及贡献代码。
6 |
7 | ## 什么是 jQuery Timer
8 |
9 | - 为 jQuery 量身定制的计时器,取代 js 原生的 setTimeout 和 setInterval 函数,管理更简单。
10 | - 兼容所有主流PC和移动浏览器,并且完美支持 jQuery 2.x
11 | - 可以使用在简单倒计时、幻灯片程序、事件执行频率控制、以及所有需要计时器完成的地方
12 |
13 | ## 目录
14 | * [特性](#特性)
15 | * [下载](#下载)
16 | * [快速上手](#快速上手)
17 | * [所有示例](#所有示例)
18 | * [参数说明](#参数说明)
19 | * [更新日志](#更新日志)
20 |
21 | ## 特性
22 | * 结合最新的 jQuery,血统优良
23 | * 只需记忆一个API,使用简单便捷
24 | * 为 jQuery 量身定制,元素调用计时器更加便捷
25 | * 实例丰富,学习成本低,源码中文注释
26 | * 方法灵活全面,能够应付大部分计时器使用场景
27 | * 生产版大小仅有2KB,容易集成到更复杂的插件中
28 |
29 | ## 下载
30 | * [jquery-timer-2.js](http://wwh447.github.io/jQueryTimer/jquery-timer-2.js) *(开发版,7.8kb)*
31 | * [jquery-timer-2-min.js](http://wwh447.github.io/jQueryTimer/jquery-timer-2-min.js) *(生产版,2.1kb)*
32 |
33 | ## 快速上手
34 | 放置一个两秒计时器:
35 | ```javascript
36 | //两秒后弹出对话框.
37 | $("body").timer(function() {
38 | alert("Hello jQuery Timer!");
39 | });
40 | ```
41 | 放置一个三秒计时器:
42 | ```javascript
43 | //三秒后搜索页面中的 a 标签,弹出数量.
44 | $("body").timer(function() {
45 | alert( $(this).find("a").length );
46 | }, 3);
47 | ```
48 | 放置一个两秒计时器,并且指定迭代次数为三次:
49 | ```javascript
50 | //每两秒控制台输出一下系统时间戳.
51 | $("a").timer(function() {
52 | console.log( Date.now() );
53 | }, 2, 3);
54 | ```
55 | 放置一个两秒计时器,并且指定迭代次数为三次,完成时弹出提示:
56 | ```javascript
57 | //每两秒控制台输出一下当前迭代进度.
58 | $("a").timer(function(i, count) {
59 | console.log( "计时进度: " + i + "/" + count );
60 | }, 2, 3, function() {
61 | alert("计时已完成");
62 | });
63 | ```
64 |
65 | ## 所有示例
66 | 1. [开始计时器](http://wwh447.github.io/jQueryTimer/demo2/hello.html)
67 | 2. [指定计时器的时间间隔](http://wwh447.github.io/jQueryTimer/demo2/duration.html)
68 | 3. [指定计时器的循环次数](http://wwh447.github.io/jQueryTimer/demo2/count.html)
69 | 4. [让计时器立即开始执行](http://wwh447.github.io/jQueryTimer/demo2/quick.html)
70 | 5. [设置计时器完成时的回调函数](http://wwh447.github.io/jQueryTimer/demo2/callback.html)
71 | 6. [用JSON的参数形式来配置计时器](http://wwh447.github.io/jQueryTimer/demo2/json.html)
72 | 7. [放置未激活的计时器,以及手动激活计时器](http://wwh447.github.io/jQueryTimer/demo2/actived.html)
73 | 8. [计时器暂停和继续以及停止示例](http://wwh447.github.io/jQueryTimer/demo2/pause.html)
74 | 9. [计时器应用 - 倒计时程序](http://wwh447.github.io/jQueryTimer/demo2/count-down.html)
75 | 10. [计时器应用 - 经典打字效果](http://wwh447.github.io/jQueryTimer/demo2/typist.html)
76 |
77 | 备注:DEMO中默认使用 jQuery 2.x,可以换做 1.9+ 来兼容IE
78 |
79 | ## 参数说明
80 |
81 | timer 方法接收的可选参数,依照参数顺序列举。
82 | 可以按照顺序给出可选参数,也可以传入JSON格式配置指定参数。
83 |
84 | 参数 | 类型 | 默认值 | 说明
85 | ------------ | ------------ | ------------ | ------------
86 | iteration | Function | 空函数 | 计时器执行的迭代函数,接受两个可选参数。第一个标识当前回调执行的次数,第二个参数标识迭代的目标次数
87 | duration | Number | 2 | 计时器迭代时间间隔,时间单位是秒,默认为2秒
88 | count | Number | 1 | 计时器迭代目标次数。如果设置为 -1 或 0 则无限迭代,直到被设为停止。
89 | quick | Boolean | false | 是否设置计时器后,就立即先执行一次. 如果设置 true ,计时器放置后就率先执行一次,而不必等待第一次计时结束
90 | callback | Function | 空函数 | 计时器走完计时后的回调函数, 所有迭代完成后执行. 无限循环退出时自动执行,或者配置为手动触发。
91 | i | Number | 0 | 计时器索引的起始值,记录计时器已执行的次数。未设置则从 0 开始计数.
92 | actived | Boolean | true | 处于激活状态的计时器才会工作,否则被手动激活后才开始工作.
93 |
94 | [Project Home](http://wwh447.github.io/jQueryTimer/)
95 |
96 | [DEMO](http://wwh447.github.io/jQueryTimer/#%E6%89%80%E6%9C%89%E7%A4%BA%E4%BE%8B)
97 |
98 | ## 更新日志
99 |
100 | ##### v2.0.0 beta
101 | 1. 构建了新的API方法,无需记忆多个API。只需一个API方法即可实现计时器的放置、暂停、继续、停止。
102 | 2. 计时器实现指定次数迭代:单次、指定次数、无限次数
103 | 3. 计时器添加可立即执行的配置,设置后计时器放置完就率先执行一次
104 | 4. 实现计时器的完成回调函数,所有迭代完成后执行。无限循环退出时自动执行,或者配置为手动触发。
105 | 5. 实现计时器可以暂停和继续上一次未完成的工作,接着跑完
106 | 6. 实现计时器可放置未激活的计时器,之后手动激活再运行
107 |
108 | ##### v1.0.1 beta
109 | 1. 优化代码提升性能
110 |
111 | ##### v1.0.0 beta
112 | 1. 创建项目初始代码
113 | 2. 发布说明和示例
114 |
--------------------------------------------------------------------------------
/demo/param-callback.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 打开控制台检查源码...
14 |
15 |
16 |
17 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/demo/param-fun.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 打开控制台检查源码...
14 |
15 |
16 |
17 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/demo/param-iCount.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 打开控制台检查源码...
14 |
15 |
16 |
17 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/demo/param-immediately.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 打开控制台检查源码...
14 |
15 |
16 |
17 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/demo/param-time.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 打开控制台检查源码...
14 |
15 |
16 |
17 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/demo/pay0.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 打开控制台检查源码...
16 |
17 |
18 |
19 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/demo/pay1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
22 | jQuery Timer
23 |
24 |
25 | 欢迎贡献代码,以及 DEMO 和 BUG
26 |
27 |
28 | 什么是 jQuery Timer
29 |
30 |
31 | - 为 jQuery 量身定制的计时器,取代 js 原生的 setTimeout 和 setInterval 函数,管理更简单。
32 | - 兼容所有主流PC和移动浏览器,并且完美支持 jQuery 2.x
33 | - 可以使用在简单倒计时、幻灯片程序、事件执行频率控制、以及所有需要计时器完成的地方
34 |
35 |
36 |
37 | 目录
38 |
39 |
47 |
48 |
49 | 特性
50 |
51 |
52 | - 结合最新的 jQuery,血统优良
53 | - 只需记忆一个API,使用简单便捷
54 | - 为 jQuery 量身定制,元素调用计时器更加便捷
55 | - 实例丰富,学习成本低,源码中文注释
56 | - 方法灵活全面,能够应付大部分计时器使用场景
57 | - 生产版大小仅有2KB,容易集成到更复杂的插件中
58 |
59 |
60 |
61 | 下载
62 |
63 |
71 |
72 |
73 | 快速上手
74 |
75 | //两秒以后弹出对话框.
76 | $("body").timer(function() {
77 | alert("Hello jQuery Timer!");
78 | });
79 |
80 |
81 | 所有示例
82 |
83 |
84 | - 开始计时器
85 | - 指定计时器的时间间隔
86 | - 指定计时器的循环次数
87 | - 让计时器立即开始执行
88 | - 设置计时器完成时的回调函数
89 | - 用JSON的参数形式来配置计时器
90 | - 放置未激活的计时器,以及手动激活计时器
91 | - 计时器暂停和继续以及停止示例
92 | - 计时器应用 - 倒计时程序
93 | - 计时器应用 - 经典打字效果
94 |
95 |
96 |
97 | 参数说明
98 |
99 | timer 方法接收的可选参数,依照参数顺序列举。
100 | 可以按照顺序给出可选参数,也可以传入JSON格式配置指定参数。
101 |
102 |
103 |
104 | 参数 |
105 | 类型 |
106 | 默认值 |
107 | 说明 |
108 |
109 |
110 |
111 | iteration |
112 | Function |
113 | 空函数 |
114 | 计时器执行的迭代函数,接受两个可选参数。第一个标识当前回调执行的次数,第二个参数标识迭代的目标次数 |
115 |
116 |
117 | duration |
118 | Number |
119 | 2 |
120 | 计时器迭代时间间隔,时间单位是秒,默认为2秒 |
121 |
122 |
123 | count |
124 | Number |
125 | 1 |
126 | 计时器迭代目标次数。如果设置为 -1 或 0 则无限迭代,直到被设为停止。 |
127 |
128 |
129 | quick |
130 | Boolean |
131 | false |
132 | 是否设置计时器后,就立即先执行一次. 如果设置 true ,计时器放置后就率先执行一次,而不必等待第一次计时结束 |
133 |
134 |
135 | callback |
136 | Function |
137 | 空函数 |
138 | 计时器走完计时后的回调函数, 所有迭代完成后执行. 无限循环退出时自动执行,或者配置为手动触发。 |
139 |
140 |
141 | i |
142 | Number |
143 | 0 |
144 | 计时器索引的起始值,记录计时器已执行的次数。未设置则从 0 开始计数. |
145 |
146 |
147 | actived |
148 | Boolean |
149 | true |
150 | 处于激活状态的计时器才会工作,否则被手动激活后才开始工作. |
151 |
152 |
153 |
154 | Project Home
155 |
156 | DEMO
157 |
158 |
159 | 更新日志
160 |
161 | v2.0.0 beta
162 |
163 | - 构建了新的API方法,无需记忆多个API。只需一个API方法即可实现计时器的放置、暂停、继续、停止。
164 | - 计时器实现指定次数迭代:单次、指定次数、无限次数
165 | - 计时器添加可立即执行的配置,设置后计时器放置完就率先执行一次
166 | - 实现计时器的完成回调函数,所有迭代完成后执行。无限循环退出时自动执行,或者配置为手动触发。
167 | - 实现计时器可以暂停和继续上一次未完成的工作,接着跑完
168 | - 实现计时器可放置未激活的计时器,之后手动激活再运行
169 |
170 |
171 | v1.0.1 beta
172 |
173 | - 优化代码提升性能
174 |
175 |
176 | v1.0.0 beta
177 |
178 | - 创建项目初始代码
179 | - 发布说明和示例
180 |
181 |
182 |
183 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
--------------------------------------------------------------------------------
/jquery-timer-2.0.0-min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * jQuery 计时器,所有的参数都为可选参数,支持JSON配置或根据参数顺序配置.
3 | * (https://github.com/wwh447/jQueryTimer)
4 | *
5 | * @param (Function)iteration 迭代函数 {默认值:空函数}.
6 | * @param (Number)duration 迭代间隔 {默认值:2秒}.
7 | * @param (Number)count 迭代目标次数 {默认值:1}.
8 | * @param (Boolean)quick 是否立即执行 {默认值:false}.
9 | * @param (Function)callback 计时完成后的回调函数 {默认值:空函数}.
10 | * @param (Number)i 计时的其实索引 {默认值:0}.
11 | * @param (Boolean)actived 是否激活计时器.标记为激活才会立即执行 {默认值:true}.
12 | * @return (Object)$this 支链式调用.
13 | * @author Eded.Wang
14 | * @date 2015-12-28.
15 | */
16 | !function(){$.fn.extend({timer:function(){var params=arguments;var $that=$(this);var options={"iteration":$.noop,"duration":2,"count":1,"quick":false,"callback":$.noop,"i":0,"actived":true};var key=0;var setTimer=function(){key=setTimeout(autoCallback,options.duration*1000);$that.data("timer-key",key);return false};var clearTimer=function(key,options){clearTimeout(key);options.callback.apply($that,[options.i,options.count]);$that.removeData("timer-options");$that.removeData("timer-key");return $};var autoCallback=function(){options.iteration.apply($that,[options.i,options.count]);options.i+=1;if(options.i