zoukankan      html  css  js  c++  java
  • 【javascript】定时器组件

    '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 文档点此查看

  • 相关阅读:
    发布国内首个无服务器容器服务,运维效率从未如此高效
    阿里云异构计算团队亮相英伟达2018 GTC大会
    阿里如何将“高峰前扩容、高峰后缩容”的梦想照进现实?
    迁移到 GRUB 2
    (11计科1班-孙鹏启)SHELL脚本—期末成绩统计
    硬盘分区的c盘在外圈还是内圈
    Linux内核设计的艺术(第2版)
    卸载,弹出,安全移除驱动器 的区别
    (11级计科2班-张文旭)关于LINUX连接网络问题
    安装Zend Guard Loader
  • 原文地址:https://www.cnblogs.com/yjzhu/p/8778069.html
Copyright © 2011-2022 走看看