js定时器管理器

js定时器管理器

一：前言

在web开发中，经常会遇到定时器，比如后台管理系统中的表格数据定时刷新，实时获取系统告警等，诸如此类需定时像后台发送请求获取数据的场景，大部分都会使用到定时器。如果系统中此类场景较多，每一次都使用js原生的setInterval，显然不是一个好的方案，那么怎么优雅的处理系统中的定时器呢？

二：功能清单

1.基于setTimeout实现定时器的功能

ps: 为什么不直接使用setInterval?

setInterval若用于异步请求，会存在一个弊端：
可能存在上一次请求还未返回，下一次的请求已发送的情况
显然此种场景并不符合我们的预期，故本文将采用setTimeout对定时器进行改写

2.定时任务需区分长存定时任务和临时定时任务，长存定时任务不会随着菜单的切换而被暂停，临时定时任务需跟随菜单的切换，自动暂停

`长存定时任务`：系统级别的定时任务，比如系统的实时告警
`临时定时任务`： 只在本菜单界面使用，菜单切换时需自动的清除，比如表格数据的自动刷新

3.任务创建后，针对单个定时任务提供启动、暂停、移除的方法

4.当浏览器切换到其他的tab页时，系统中所有定时任务，均暂停，当tab激活时，暂停的任务，启动

5.提供全局的清除当前定时器的方法，用于和业务系统结合

三：代码实现

var MyPlugin = {
   
	util:{
   }
};
MyPlugin.TimerManager = function (initConfig){
   
	var _this = {
   },defaultConfig = {
   
		interval: 30 * 1000,
		autoRun: false,
	};

	// 默认配置
	_this.cfg = Object.assign({
   }, defaultConfig, initConfig || {
   });
	// 系统级别定时器
	_this.systemTimer = {
   };
	// 临时定时器
	_this.currentTimer = {
   };
	// timer的索引
	var timerIndex = "1";

	/**
	 * @Author   xyc
	 * @DateTime 2021-03-23T15:21:51+0800
	 * cfg:{callback:定时器的回调函数，interval?:定时器的间隔时间，systemTimer?:是否是系统级的定时器}
	 */
	_this.addTask = function(cfg){
   
		if (typeof cfg === "object") {
   
			var task = Object.assign({
   }, _this.cfg, cfg);
			task.timer = "timer_"+timerIndex;
			task.config = cfg;
			if (typeof task.callback === "function") {