【javascript】定时器组件

时间:2022-05-09 18:45:55
'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 文档点此查看