1、引入插件,传统方式页面引入
示例:使用 $.timerHandler 管理注册定时器
2、AMD/CMD/Node方式加载
使用 define Name/ exports module Name 管理注册定时器, 默认为 timerHandler
示例:使用 timerHandler 管理注册定时器
3、接口方法 注:定时器对象缓存数据注册在jQuery($)对象上 $.timerHandler
名称 | 参数 | 返回值 | 说明 |
---|---|---|---|
timerHandler(value) | string | timerHandler Obj | 注意一个名称为value的定时器,并返回一个定时器对象,如已存在返回已注册定时器 |
timerHandler.time(value) | string or integer | this | 设置间隔周期时间 |
timerHandler.limit(value) | integer | this | 设置重复次数,默认0不限制,具体数值N 限制运行N次后自动销毁 |
timerHandler.bindDom(value) | jQuery selector string | this | 绑定注册到Dom节点,适用于Ajax加载的脚本定时器,将会监听Dom移除事件,Dom移除后,绑定的定时器也将销毁,如不指定定时器绑定在全局 |
timerHandler.call(callback) | function | this | 定时器回调主函数 |
timerHandler.callStart(callback) | function | this | 开始之前的回调函数 |
timerHandler.callStartEnd(callback) | function | this | 开始之后的回调函数 |
timerHandler.callPause(callback) | function | this | 暂停之前的回调函数 |
timerHandler.callPauseEnd(callback) | function | this | 暂停之后的回调函数 |
timerHandler.callStop(callback) | function | this | 停止(销毁)之前的回调函数 |
timerHandler.callStopEnd(callback) | function | this | 停止(销毁)之后的回调函数 |
timerHandler.start() | 无 | this | 启动定时器 |
timerHandler.pause() | 无 | this | 暂停定时器 |
timerHandler.stop() | 无 | bool | 停止(销毁)定时器 |
4、开始使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | //注册一个名为'mytimer1'的定时器,每5秒运行一次 var myTimer=$.timerHandler( 'mytimer1' ).time( '5s' ).call( function (count){ //this => timerHandler Obj console.log( 'mytimer1 runing : ' +count); }).start(); //myTimer.pause();//暂停定时器运行 //myTimer.start();//定时器重新启动 //myTimer.call(callback);//重新注册定时器回调主函数 //myTimer.stop();//停止(销毁)定时器 //注册一个名为'mytimer2'的定时器,每500毫秒运行一次,运行10次后销毁 $.timerHandler( 'mytimer2' ).time( '500ms' ).limit(10).call( function (count){ //this => timerHandler Obj console.log( 'mytimer2 runing : ' +count); }).callStopEnd( function (){ console.log( 'mytimer2 stop' ); }).start(); //注册一个名为'mytimer3'的定时器,每1秒运行一次,并将其绑定在DOM ID为 bindDomID 的节点上,当此Dom节点移除后自动销毁 $( 'body' ).append( '<div id="bindDomID">注册了一个名为mytimer3的定时器,每1秒运行一次,并将其绑定在DOM ID为 bindDomID 的节点上,当此Dom节点移除后自动销毁(此节点10秒后自动移除)</div>' ) $.timerHandler( 'mytimer3' ).time( '1s' ).bindDom( '#bindDomID' ).call( function (count){ //this => timerHandler Obj console.log( 'mytimer3 runing : ' +count); }).callStopEnd( function (){ console.log( 'mytimer3 stop' ); }).start(); //10秒后移除DOM ID为 bindDomID 的节点 $.timerHandler( 'bindDomIDRemove' ).time( '10s' ).limit(1).call( function (count){ //this => timerHandler Obj console.log( 'dom#bindDomID is remove' ); $( '#bindDomID' ).remove(); }).start(); |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com