如何在 JavaScript 中实现任务队列

任务队列的概念

任务队列就是存放任务的队列，队列中的任务都严格按照进入队列的先后顺序执行。

在前一条任务执行完毕后，立即执行下一条任务，直到任务队列清空。

任务队列的基本执行流程如下：

• 设置任务队列并发数；

• 给任务队列添加任务；

• 当前并发数和最大并发数进行比较，进行任务并发执行；

• 执行完毕后，判断队列是否为空，如果不为空，则继续执行下一条任务；

• 直至任务队列清空。

JS代码实现

我们选择使用数组来维护队列的执行顺序，按照“先进先出“的原则，根据最大并发数，依次从数组中取出元素往后执行。

代码实现如下：

class Scheduler {
  constructor(maxCount) {
    this.maxCount = maxCount; // 最大并发量
    this.count = 0; // 当前并发量
    this.taskQueue = []; // 任务队列
  }

  addTask(task) {
    if (this.count < this.maxCount) { // 当前并发量未达到最大并发量
      this.count++; // 并发量+1
      task().then(() => {
        this.count--; // 并发量-1
        this.next(); // 执行下一个任务
      });
    } else {
      this.taskQueue.push(task); // 加入任务队列
    }
  }

  next() {
    if (this.taskQueue.length > 0 && this.count < this.maxCount) {
      this.count++; // 并发量+1
      const task = this.taskQueue.shift();
      task().then(() => {
        this.count--; //并发量-1
        this.next(); //执行下一个任务
      });
    }
  }
}

测试代码

以vue项目为例，分别比较了使用ForEach遍历数组和使用队列遍历数据。

使用forEach遍历数组，控制台输出了数组的全部值。

使用队列遍历数据，控制台根据设置的并发数量逐条输出数组的值。

执行效果