【javascript】定时器组件

2018-06-24 01:52:34来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

'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中加载百度地图

下一篇:vue组件详解(四)——使用slot分发内容