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

【javascript】定时器组件的更多相关文章

  1. C#开发系统服务时用的定时器组件

    写服务时,都需要为定时器写不少的代码,感觉很麻烦,今天把这些代码封装一下,希望能简化一下这方面的工作,把精力都集中在功能上 本定时器组件,每次只启动一个服务实例进行处理,而不会同时多次执行服务代码. ...

  2. Javascript定时器(三)——setTimeout(func, 0)

    setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...

  3. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  4. JavaScript定时器详解

    假设有以下场景 setTimeout(function timeoutHandler(){ /*Some timeout handle code that runs for 6ms*/ }, 10); ...

  5. 实验三 CC2530平台上CC2530平台上定时器组件的

    实验三 CC2530平台上CC2530平台上定时器组件的TinyOS编程 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生初步掌握CC2530定时器的PWM功能,及其TinyOS ...

  6. Javascript 定时器调用传递参数的方法

    文章来源:  https://m.jb51.net/article/20880.htm 备注:先记下,以后整理: Javascript 定时器调用传递参数的方法,需要的朋友可以参考下. 无论是wind ...

  7. rt-thread中软件定时器组件超时界限的一点理解

    @2019-01-15 [小记] 对 rt-thread 中的软件定时器组件中超时界限的一点理解 rt_thread_timer_entry(void *parameter)函数中if ((next_ ...

  8. JavaScript定时器的工作原理(翻译)

    JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...

  9. JavaScript定时器作业

    JavaScript定时器作业 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...

  10. 关于JavaScript定时器我的一些小理解

    因为自己在平时工作中,有些功能需要用到定时器,但是定时器并不像我们表边上看到的那样,所以这周末我看看书查查资料,深入研究了一下JavaScript中的定时器,那么废话不多说,下面进入我们今天的正题. ...

随机推荐

  1. php数组和对象转换函数

    /**  * 数组 转 对象  *  * @param array $arr 数组  * @return object  */ function array_to_object($arr) {     ...

  2. VS Code打造一个完美的Springboot开发环境

    对于使用Springboot环境开发java应用,首选IDE还是IntelliJ IDEA(2018),当前版本已经很流畅了,现在开发用的电脑配置基本都能够很6的跑起来,IDEA用起来真心爽啊,比Ec ...

  3. (转)我是一个java class

    前言:本文主要想讲一下Java虚拟机的故事, 可能有点偏门,不妥之处欢迎留言交流. 第一回 陌生警察 我出生在C盘下面一个很深层次的目录下, 也不知道是谁把我放到这里的. 我一直在睡觉,外边的日出日落 ...

  4. JavaScript立即执行函数学习

    1.新建对象,方法内变量作用域理解错误 var md1 = { count: 0, add: function () { count++; }, sub: function () { count--; ...

  5. JavaScript踩坑

    1 //这样做会抛出错误 alert(ttt); //这样做不会,只是会弹出undefine而已 alert(window.ttt); 当然可以try catch如此捕获异常 try { //这样做会 ...

  6. fatal: You are not currently on a branch. 问题解决

    fatal: You are not currently on a branch. 解决 注:亲试,这种方法会把本地的修改给冲掉,所以事先一定要备份下文档,之后覆盖,重新上传或pull即可:解决方法: ...

  7. Incorrect username or password ( access token )解决

    Q:Git提交时,给出提示Incorrect username or password ( access token ) K: 此处是用户名或者密码有误,建议解决方法两种.具体看哪一种可行,可试. 第 ...

  8. 转:2016年崛起的js项目

    近几年 JS 社区创新和演化的速度是有目共睹的,几个月前比较时髦的技术很可能现在已经过时了. 2016 已经过去,你有没有担心错过了什么重要的内容?在这篇调查报告中我们会为你解读社区的主流趋势. 我们 ...

  9. django之Ajax初识

    Ajax准么说是用于Javascript与服务器端进行交互的,我们之前呢没有了解ajax也同样可以完成与服务器的交互,那么ajax的优势在哪里?首先ajax是异步交互的也就是说我们基本不会遇到卡顿现象 ...

  10. 何谓sdk,何谓api

    狭义上的 SDK 指 Windows SDK,包括在 Windows 平台进行开发的一系列头文件和库文件以及命令行工具等. API 是 SDK 提供给用户的函数,即接口就是这个 SDK 提供给你用于应 ...