Vue3中循环任务优化方案

需求

在使用循环任务时，往往需要使用到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(`开始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
        )
    )
  }

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

  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(`id: ${id} 的Task被移除！`)
  }

  private destroy() {
    clearInterval(this.intervalId);
    this.tasks.clear();
    console.log(`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;

  eager: boolean;

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

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

  tryExecute(now: number) {
    if (this.isSync && this.isRunning) {
      if (!this.eager && this.type === 'Loop') {
        this.next = now + this.interval;
      }
      return;
    }
    if (now < this.next) {
      return;
    }
    this.execute();
    if (this.type === 'Loop') {
      this.next = 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 function useSchedule() {
  return {
    schedule
  }
}

具体使用案例

案例一： 延时任务

import { useSchedule } from "@/use/sys/useSchedule";

const schedule = useSchedule().schedule;

let lastTime = Date.now();

async function mockFn() {
  await new Promise<void>((resolve) => {
    setTimeout(() => {
      const now = Date.now();
      const realInterval = now - lastTime;
      lastTime = now;
      console.log(`Test delay task, real interval is ${realInterval / 1000}s`)
      resolve();
    }, 4000)
  })
}

schedule.setDelayTask(
    "delayTest",
    mockFn,
    2000
)

案例二：循环任务（同步非eager）

import { useSchedule } from "@/use/sys/useSchedule";

const schedule = useSchedule().schedule;

let lastTime = Date.now();

async function mockFn() {
  await new Promise<void>((resolve) => {
    setTimeout(() => {
      const now = Date.now();
      const realInterval = now - lastTime;
      lastTime = now;
      console.log(`Test Normal Loop task, real interval is ${realInterval / 1000}s`)
      resolve();
    }, 4000)
  })
}

schedule.setLoopTask(
    "LoopTest",
    mockFn,
    2000
)

案例三：eager循环任务

import { useSchedule } from "@/use/sys/useSchedule";

const schedule = useSchedule().schedule;

let lastTime = Date.now();

async function mockFn() {
  await new Promise<void>((resolve) => {
    setTimeout(() => {
      const now = Date.now();
      const realInterval = now - lastTime;
      lastTime = now;
      console.log(`Test Eager Loop task, real interval is ${realInterval / 1000}s`)
      resolve();
    }, 4000)
  })
}

schedule.setEagerLoopTask(
    "EagerLoopTest",
    mockFn,
    2000
)

案例四：异步循环

import { useSchedule } from "@/use/sys/useSchedule";

const schedule = useSchedule().schedule;

let lastTime = Date.now();

async function mockFn() {
  await new Promise<void>((resolve) => {
    setTimeout(() => {
      const now = Date.now();
      const realInterval = now - lastTime;
      lastTime = now;
      console.log(`Test Async Loop task, real interval is ${realInterval / 1000}s`)
      resolve();
    }, 4000)
  })
}

schedule.setAsyncLoopTask(
    "AsyncLoopTest",
    mockFn,
    2000
)