【javascript】定时器组件
2018-06-24 01:52:34来源:未知 阅读 ()
'use strict'; module.exports = function() { this.timer = {}; this.config = {}; // 初始化参数 this.init = function(opts) { var id = opts.id; this.config[id] = opts; this.config[id].interval = this.config[id].interval || 1; this.config[id].begin = opts.begin || 0; this.config[id].end = opts.end || 0; this.config[id].step = opts.step || 1; this.config[id].type = opts.begin < opts.end ? 1 : 0; this.clear([id]); this.start(id); }; // 开启定时器 this.start = function(id) { var self = this; var type = this.config[id].type; var interval = this.config[id].interval; var step = this.config[id].step; var cb = this.config[id].callback; // 先执行一次回调 cb && cb(this.config[id].begin); type ? this.config[id].begin += step : this.config[id].begin -= step; this.timer[id] = setInterval(function() { self.loop(id); }, interval * 1e3); }; this.loop = function(id) { var begin = this.config[id].begin; var end = this.config[id].end; var step = this.config[id].step; var cb = this.config[id].callback; var endFunc = this.config[id].endFunc; cb && cb(this.config[id].begin); if (this.config[id].type) { if (begin > end) { this.clear([id]); endFunc && endFunc(); } else { this.config[id].begin += step; } } else { if (begin < end) { this.clear([id]); endFunc && endFunc(); } else { this.config[id].begin -= step; } } }; // 更新定时器参数 this.update = function(opts) { this.config[opts.id] = _.extend({}, this.config[opts.id], opts); }; // 清除某个(多个或者全部)定时器 this.clear = function(ids) { var self = this; if (ids && ids.length) { _.each(ids, function(id) { clearInterval(self.timer[id]); }); } else { _.each(self.timer, function(v) { clearInterval(v); }); } }; };
参数说明
- opts.id(String): 定时器id;
- opts.interval(Number, 单位s, 默认1): 每次轮询时间,比如 1;
- opts.callback: 回调函数;
- opts.begin(Number): 起始值;
- opts.end(Number): 终点值;
- opts.step 递增/递减数值。
-
opts.endFunc 定时器结束后触发回调(新增)
如何使用
var timer = new Timer(); timer.init({ id: 'count', begin: 60, callback: function(count) { if (count >= 0) { // do something... } }, endFunc: function() { // do something... } });
PS
_.each() 和 _.extend() 是 underscore.js 语法,有关 underscore.js 文档点此查看。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Vue中加载百度地图
- javascript面向对象入门基础详细介绍 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
- Javascript中的经典技巧 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash