【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 文档点此查看。
【javascript】定时器组件的更多相关文章
- C#开发系统服务时用的定时器组件
写服务时,都需要为定时器写不少的代码,感觉很麻烦,今天把这些代码封装一下,希望能简化一下这方面的工作,把精力都集中在功能上 本定时器组件,每次只启动一个服务实例进行处理,而不会同时多次执行服务代码. ...
- Javascript定时器(三)——setTimeout(func, 0)
setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...
- Javascript定时器(二)——setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...
- JavaScript定时器详解
假设有以下场景 setTimeout(function timeoutHandler(){ /*Some timeout handle code that runs for 6ms*/ }, 10); ...
- 实验三 CC2530平台上CC2530平台上定时器组件的
实验三 CC2530平台上CC2530平台上定时器组件的TinyOS编程 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生初步掌握CC2530定时器的PWM功能,及其TinyOS ...
- Javascript 定时器调用传递参数的方法
文章来源: https://m.jb51.net/article/20880.htm 备注:先记下,以后整理: Javascript 定时器调用传递参数的方法,需要的朋友可以参考下. 无论是wind ...
- rt-thread中软件定时器组件超时界限的一点理解
@2019-01-15 [小记] 对 rt-thread 中的软件定时器组件中超时界限的一点理解 rt_thread_timer_entry(void *parameter)函数中if ((next_ ...
- JavaScript定时器的工作原理(翻译)
JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...
- JavaScript定时器作业
JavaScript定时器作业 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...
- 关于JavaScript定时器我的一些小理解
因为自己在平时工作中,有些功能需要用到定时器,但是定时器并不像我们表边上看到的那样,所以这周末我看看书查查资料,深入研究了一下JavaScript中的定时器,那么废话不多说,下面进入我们今天的正题. ...
随机推荐
- BZOJ.4572.[SCOI2016]围棋(轮廓线DP)
BZOJ 洛谷 \(Description\) 给定\(n,m,c\).\(Q\)次询问,每次询问给定\(2*c\)的模板串,求它在多少个\(n*m\)的棋盘中出现过.棋盘的每个格子有三种状态. \( ...
- [JOISC2014]電圧
[JOISC2014]電圧 题目大意: 一个\(n(n\le10^5)\)个点,\(m(m\le2\times10^5)\)条边的无向图.要在图中找到一条边,满足去掉这条边后,剩下的图是一个二分图,且 ...
- Nginx (LNMP+https)
单向认证与双向认证的概念 什么是单向认证 单项认证就是比如你有个密码用户名然后和服务器上的用户信息进行比对一致的话你们就可以建立连接. 什么是双向认证 SSL的双向认证就是客户端要获取服务端的证书,检 ...
- UE4入门(一)软件安装教程
基本的安装流程:下载并安装EpicInstaller=>登陆EpicLauncher并在UNREAL ENGINE标签中下载并安装引擎=>打开引擎创建新项目并测试 一 .下载并安装Epic ...
- js 事件冒泡、捕获;call()、apply()
他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事件触发顺序是 ...
- pip的基本使用
pip的基本使用 1.pip简介 pip 是一个现代的,通用的 Python 包管理工具.提供了对 Python 包的查找.下载.安装.卸载的功能 pip是官方推荐的安装和管理Python包的工具,用 ...
- 前端工程化系列[03]-Grunt构建工具的运转机制
在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...
- Shader、Draw Call和渲染管线(Rendering Pipeline)
翻阅了很多资料,也做了不少笔记,决定还是对渲染进行一个总结,以巩固所学的东西. <Real-Time Rendering, Third Edition> (PDF的配图链接)将一个渲染 ...
- CentOS 7最小安装之后应该尽快做好的几件事情
1 导言 CentOS的最小系统仅包含内核和必要的工具,派不上多大用处,以后还得安装很多附加软件.为了方便以后的工作,还需要对系统做一些调整和补充. 本文涉及的工作均应以root身份执行 ...
- js正则提取数字小数,提取中文,提取英文
var value="污染物:PM2.5"; //提取中文 console.log(value.replace(/[^\u4E00-\u9FA5]/g,'')); //提取英文 c ...