巧用Promise轻松构建任务队列，队列满时暂停，任务完成后再继续

2023-09-10 06:31:26

任务队列的设计思路

在构建任务队列之前，我们首先需要了解它的设计思路。任务队列是一个先进先出（FIFO）的队列，这意味着任务按照进入队列的顺序依次执行。同时，任务队列还具有限制同时执行任务数量的功能。当队列中的任务数达到最大值时，后续任务将被暂停执行，直到队列中的任务有完成的状态，才会添加新的任务进入队列。

Promise实现任务队列

现在，我们开始利用Promise来构建任务队列。首先，我们需要创建一个队列数组来存储任务。然后，我们使用一个Promise来跟踪队列中的任务数。当队列中的任务数达到最大值时，我们就将该Promise的状态设置为“resolved”，以暂停后续任务的执行。当队列中的任务有完成的状态时，我们就将该Promise的状态设置为“rejected”，以继续执行后续的任务。

// 创建队列数组
const queue = [];

// 创建一个Promise来跟踪队列中的任务数
const taskCountPromise = new Promise((resolve, reject) => {
  // 当队列中的任务数达到最大值时，将该Promise的状态设置为“resolved”
  if (queue.length >= maxTaskCount) {
    resolve();
  }
});

// 定义任务处理函数
const taskHandler = (task) => {
  // 等待队列中的任务数小于最大值
  await taskCountPromise;

  // 执行任务
  task();

  // 任务完成后，将队列中的任务数减一
  queue.shift();

  // 如果队列中还有任务，则继续执行下一个任务
  if (queue.length > 0) {
    taskHandler(queue[0]);
  } else {
    // 队列中的任务全部完成，将该Promise的状态设置为“rejected”
    taskCountPromise.reject();
  }
};

// 将任务添加到队列中
const addTask = (task) => {
  // 将任务添加到队列数组中
  queue.push(task);

  // 如果队列中的任务数达到最大值，则暂停后续任务的执行
  if (queue.length >= maxTaskCount) {
    taskCountPromise.resolve();
  }
};