前端定时循环任务管理工具类

使用场景和目的

在设计到数字平台监控系统，经常需要一定的时间间隔去调用接口，在vue项目中，如果多个页面涉及到定时调用接口，就会出现重复多次创建定时器，如果项目组的小伙伴不注意定时器的销毁，就会造成资源浪费和一些奇怪的现象，因此需要一个统一的定时器来管理调用接口。

工具类代码 task.js

export default () => {
  /**
   * method:function, //执行函数
   * immediate:boolean, //是否立即执行
   * interval:number //定时间隔
   */
  let loopTaskList = [];
  let intervalId = null;
  /**
   * 创建Task任务
   */
  const _createdLoopTask = function () {
    const taskLen = 1000; //当前粒度间隔为1秒，可以根据实际情况调整
    let count = 0;
    intervalId = setInterval(() => {
      loopTaskList.map(item => {
        const times = Math.ceil(item.interval / taskLen);
        const immediate = item.immediate;
        if (immediate || (count % times == 0 && count > 0)) {
          try {
            if (typeof item.method == 'function') {
              item.method();
            }
          } catch (error) {
            console.error(error);
          }
          item.immediate = false;
        }
      })
      count++;
    }, taskLen);
  }
  /**
   * 添加定时任务到列表
   * @param {Object} _loopTaskList 
   */
  const pushLoopTask = function (_loopTask) {
    loopTaskList.push(_loopTask);
  }
  /**
    * 添加定时任务到列表
    * @param {Array} _loopTaskList 
    */
  const pushLoopTaskList = function (_loopTaskList) {
    loopTaskList = loopTaskList.concat(_loopTaskList);
  }

  /**
   * 执行定时任务
   * @returns 
   */
  const executeLoopTask = function (isStart = false) {
    clearInterval(intervalId);
    if (!isStart) {
      return;
    }
    _createdLoopTask();
  }

  const clearTask = function () {
    clearInterval(intervalId);
    loopTaskList = [];
  }

  return {
    pushLoopTask,
    pushLoopTaskList,
    executeLoopTask,
    clearTask,
  }
}

配合vuex使用 store/index.js

import Vue from 'vue'
import Vuex from 'vuex' 
import task from '@/utils/task.js';
Vue.use(Vuex)  
const {
  pushLoopTask,
  pushLoopTaskList,
  executeLoopTask,
  clearTask,
} = task();

export default new Vuex.Store({
  state: { },
  getters: { },
  mutations: {
    /**
     * 添加定时任务到列表
     * @param {*} state 
     * @param {*} loopTaskList 
     */
    loopTaskList(state, loopTaskList) {
      pushLoopTaskList(loopTaskList);
    },
    /**
     * 执行定时任务
     * @returns 
     */
    executeLoopTaskList(state, start) {
      executeLoopTask(start);
    },
    /**
     * 清楚定时任务
     */
    clearTaskList(state) {
      clearTask();
    },    
  },
  actions: {},
  modules: {},
});

在App.vue页面，进行统一管理，创建和销毁

<template>
   ...
template>
<script> 
export default {  
  data() {
    return { 
    }
  },  
  created() {
  	//开启任务
    this.$store.commit("executeLoopTaskList", true);
  },
  destroyed() {
  	//暂停任务
    //this.$store.commit("executeLoopTaskList", false);
    //清除任务
    this.$store.commit("clearTaskList", false);
  }
}
script>

<style> 
style>

使用：在需要使用的地方，将任务添加到列表

	const task = [
		// 时间间隔           方法                                    是否立即执行
        { interval: 30 * 1000, method: this.getNowSystemMessageInfo, immediate: true },
        { interval: 30 * 1000, method: this.getStatisticsInfo, immediate: true },
        { interval: 30 * 1000, method: this.getNewMessage, immediate: true },
        { interval: 10 * 60 * 1000, method: this.getTimeoutMessage, immediate: true },
      ];  
      this.$store.commit("loopTaskList", task);