需求

在使用循环任务时，往往需要使用到setInterval方法。其接受三个参数，分别是 1.具体执行的函数 2.执行时间间隔 3.传递个函数的参数，并返回一个id，后续可以使用这个id来停止循环的执行。具体的使用可以查阅MDN。
在实际开发中，很容易重复创建相同的interval实例，进行反复的执行，并且在轮询场景，如果间隔时间设置不当，往往上一条请求未完成，下一条执行又开始了。
并且在Vue3中，由于热更新的存在更容易导致不断的创建interval实例。
为了解决这个问题可以使用下面的方法

解决方案

useSchedule.ts

const _id = Date.now();

class Schedule {

  id: number;

  intervalId: number;

  /**
   * 待执行任务集合
   */
  tasks: Map<string, Task> = new Map<string, Task>();

  constructor(id: number) {
    this.id = id;
    this.intervalId = setInterval(() => {
          // 校验本Schedule是否有效 无效则直接销毁
          if (this.id !== _id) {
            this.destroy();
            return;
          }
          // 有效则遍历Task列表 找到合适的执行
          const now = Date.now();
          for (const task of this.tasks.values()) {
            task.tryExecute(now);
          }
        },
        1
    )
    console.log("Red_K.", `开始Schedule！ id: ${this.id}, intervalId: ${this.intervalId}`)
  }

  setDelayTask(id: string, exec: Function, delay: number) {
    this.tasks.set(
        id,
        new Task(
            id,
            exec,
            () => {
              this.removeTask(id)
            },
            "Delay",
            delay
        ));
  }

  setLoopTask(id: string, exec: Function, interval: number, delay: number = 0) {
    this.tasks.set(
        id,
        new Task(
            id,
            exec,
            () => {
              this.removeTask(id)
            },
            "Loop",
            delay,
            interval
        )
    )
  }

  setAsyncLoopTask(id: string, exec: Function, interval: number, delay: number = 0) {
    this.tasks.set(
        id,
        new Task(
            id,
            exec,
            () => {
              this.removeTask(id)
            },
            "Loop",
            delay,
            interval,
            false
        )
    )
  }

  removeTask(id: string) {
    this.tasks.delete(id);
    console.debug("Red_K.", `id: ${id} 的Task被移除！`)
  }

  private destroy() {
    clearInterval(this.intervalId);
    this.tasks.clear();
    console.log("Red_K.", `id: ${this.id}, intervalId: ${this.intervalId} 的Schedule示例被销毁！`)
  }
}

class Task {

  // 任务id
  id: string;

  // 具体运行函数
  exec: Function;

  // 任务类型
  type: "Delay" | "Loop";

  // 延时时间 延时任务中有效
  delay: number;

  // 间隔时间 循环任务中有效
  interval: number;

  // 是否正在运行
  isRunning: boolean = false;

  // 下次执行时间
  next: number;

  // 是否是同步任务。 尽在循环任务中有效，在循环任务中，如果前一个任务未执行完，又到其执行时间，跳过本次执行。
  isSync: boolean;

  // 延时任务在执行后需要移除自己
  removeSelf: Function;

  constructor(id: string,
              exec: Function,
              removeSelf: Function,
              type: "Delay" | "Loop",
              delay: number = 0,
              interval: number = 1000,
              isSync: boolean = true) {
    this.id = id;
    this.exec = exec;
    this.removeSelf = removeSelf;
    this.type = type;
    this.delay = delay;
    this.interval = interval;
    this.isSync = isSync;
    this.next = Date.now() + this.delay;
  }

  tryExecute(now: number) {
    if (now < this.next || (this.isSync && this.isRunning)) {
      return;
    }
    this.execute();
    if (this.type === 'Loop') {
      this.next = Date.now() + this.interval;
    }
    else if (this.type === 'Delay') {
      this.removeSelf();
    }
  }

  private async execute() {
    this.isRunning = true;
    await this.exec();
    this.isRunning = false;
  }

}
const schedule = new Schedule(_id);
export useSchedule(){
  return {
    schedule 
  }
}

具体使用案例

import { useSchedule } form '@/use/core/useSchedule'
const schedule = useSchedule().schedule；
// 案例1: 延时任务

schedule.setDelayTask(
  "testDelay",
  () => {console.log('10秒后执行')}，
  10000
)

// 案例2: 同步循环任务
// 假设任务执行时长为10秒 但是间隔设置为5秒。则会在前一个任务执行完毕之后再去执行后一个任务。

let time = Date.now();
async function exec() {
  await new Promise<void>((resolve) => {
    setTimeout(() => {
      const now = Date.now();
      const pass = now - time;
      time = now;
      console.log(`测试同步循环任务， 间隔时间是 ${pass / 1000}s`)
      resolve();
    }, 5000)
  });
}

schedule.setLoopTask(
    "syncLoopTest",
    exec,
    3000
)

// 案例3: 异步循环任务
// 假设任务执行时长为10秒 但是间隔设置为5秒。则会在前一个任务执行完毕之后再去执行后一个任务。

let time = Date.now();
async function exec() {
  await new Promise<void>((resolve) => {
    setTimeout(() => {
      const now = Date.now();
      const pass = now - time;
      time = now;
      console.log(`测试异步循环任务， 间隔时间是 ${pass / 1000}s`)
      resolve();
    }, 5000)
  });
}

schedule.setAsyncLoopTask(
    "asyncLoopTest",
    exec,
    3000
)

结果：
案例一

无

案例二

案例三