异步 JavaScript 任务队列：排队执行，优雅管理

2023-09-05 18:59:19

利用排队执行掌控 JavaScript 异步任务

了解 JavaScript 中的异步编程

在现代 Web 开发中，JavaScript 已成为不可或缺的工具。它为我们提供了强大的动态性和交互性，但随着应用程序变得越来越复杂，管理 JavaScript 中的异步任务变得至关重要。异步任务是指在后台执行的任务，不会阻塞主线程，例如网络请求或定时器。

理解异步编程的挑战在于管理任务的顺序和依赖关系。如果处理不当，可能会导致代码混乱、难以维护和调试。排队执行是一种优雅而高效的策略，可帮助我们控制异步任务并防止代码混乱。

什么是排队执行？

排队执行是一种管理异步任务的有序方法。它将任务添加到队列中，队列按照先入先出的顺序执行它们。这种方法的好处包括：

控制并发： 限制同时执行的任务数量，防止资源过载。
确保任务顺序： 保证任务按正确的顺序执行，避免数据竞争。
简化调试： 通过将任务序列化，更容易追踪错误和调试代码。
提高可维护性： 清晰的任务队列有助于理解代码流并维护复杂应用程序。

如何实现队列？

我们可以使用 JavaScript 的队列类来管理异步任务。该类应提供以下功能：

添加任务
执行任务
处理任务完成
处理任务错误
处理任务超时

以下是一个简单的 JavaScript 队列类示例：

class TaskQueue {
  constructor(maxConcurrency) {
    this.queue = [];
    this.maxConcurrency = maxConcurrency;
    this.runningTasks = 0;
    this.timeout = 5000; // 默认超时时间 5 秒
  }

  addTask(task) {
    this.queue.push(task);
    this.executeNext();
  }

  executeNext() {
    if (this.runningTasks < this.maxConcurrency && this.queue.length) {
      const task = this.queue.shift();
      this.runningTasks++;
      const timeoutId = setTimeout(() => {
        this.onTaskTimeout(task);
      }, this.timeout);
      task()
        .then((result) => {
          this.onTaskComplete(task, result);
          clearTimeout(timeoutId);
        })
        .catch((error) => {
          this.onTaskError(task, error);
          clearTimeout(timeoutId);
        });
    }
  }

  onTaskComplete(task, result) {
    this.runningTasks--;
    // 调用回调函数处理结果
    if (this.onComplete) {
      this.onComplete(task, result);
    }
    this.executeNext();
  }

  onTaskError(task, error) {
    this.runningTasks--;
    // 调用错误处理函数处理错误
    if (this.onError) {
      this.onError(task, error);
    }
    this.executeNext();
  }

  onTaskTimeout(task) {
    this.runningTasks--;
    // 调用超时处理函数处理超时
    if (this.onTimeout) {
      this.onTimeout(task);
    }
    this.executeNext();
  }
}

如何使用队列？

我们可以使用队列类来管理异步任务。以下是如何使用上例中队列类的示例：

const taskQueue = new TaskQueue(3); // 同时执行最多 3 个任务

taskQueue.addTask(async () => {
  // 执行异步任务 1
});

taskQueue.addTask(async () => {
  // 执行异步任务 2
});

taskQueue.addTask(async () => {
  // 执行异步任务 3
});

// 设置回调函数处理任务完成
taskQueue.onComplete = (task, result) => {
  console.log(`任务 "${task}" 执行完成，结果：`, result);
};

// 设置错误处理函数处理任务错误
taskQueue.onError = (task, error) => {
  console.error(`任务 "${task}" 执行错误：`, error);
};

// 设置超时处理函数处理任务超时
taskQueue.onTimeout = (task) => {
  console.warn(`任务 "${task}" 超时`);
};