如何使用JavaScript实现一个简单的任务队列优化异步编程

在JavaScript的异步编程场景中，我们经常会遇到需要批量处理异步任务的需求，比如同时发起多个网络请求、批量处理文件操作等。如果直接让所有异步任务同时执行，可能会导致请求过载、执行顺序不可控等问题。此时实现一个简单的任务队列，就能很好地管控异步任务的执行流程，让任务按设定的规则有序执行。

任务队列的核心设计思路

任务队列的核心作用是维护一个待执行的任务列表，按照先进先出的规则依次执行任务，同时可以灵活控制并发执行的数量。一个基础的任务队列需要包含以下几个核心部分：

• 任务存储容器：用来存放待执行的任务函数
• 执行状态标识：标记队列是否正在执行任务
• 并发控制参数：设定同时执行的最大任务数量
• 任务添加方法：向队列中新增待执行的任务
• 任务执行方法：从队列中取出任务并执行，处理执行完成后的后续逻辑

基础版任务队列实现

首先我们实现一个最基础的任务队列，支持添加异步任务，并且按顺序依次执行，同一时间只执行一个任务。

class SimpleTaskQueue {
  constructor() {
    // 存储待执行的任务
    this.taskList = [];
    // 标记队列是否正在执行
    this.isRunning = false;
  }

  // 添加任务到队列
  addTask(task) {
    this.taskList.push(task);
    // 添加任务后如果队列没有在执行，就启动执行流程
    if (!this.isRunning) {
      this.run();
    }
  }

  // 执行队列中的任务
  async run() {
    // 如果队列为空或者正在执行，直接返回
    if (this.taskList.length === 0 || this.isRunning) {
      return;
    }
    this.isRunning = true;
    // 取出队列头部的任务
    const task = this.taskList.shift();
    try {
      // 执行异步任务
      await task();
      console.log('任务执行完成');
    } catch (error) {
      console.error('任务执行失败:', error);
    } finally {
      // 当前任务执行完成后，继续执行下一个任务
      this.isRunning = false;
      this.run();
    }
  }
}

// 测试代码：创建几个模拟的异步任务
function createAsyncTask(taskName, delay) {
  return () => new Promise(resolve => {
    setTimeout(() => {
      console.log(`任务 ${taskName} 执行完毕，耗时 ${delay}ms`);
      resolve();
    }, delay);
  });
}

// 初始化队列
const queue = new SimpleTaskQueue();
// 添加任务
queue.addTask(createAsyncTask('A', 1000));
queue.addTask(createAsyncTask('B', 500));
queue.addTask(createAsyncTask('C', 800));

上面的代码实现了一个基础的任务队列，任务的执行顺序是A、B、C，即使B任务的耗时更短，也会等A任务执行完成后再执行B，符合先进先出的规则。

支持并发控制的任务队列实现

基础版的队列同一时间只能执行一个任务，效率较低。我们可以扩展队列功能，支持设定最大并发数量，同时执行多个任务，提升执行效率。

class ConcurrentTaskQueue {
  constructor(maxConcurrency = 2) {
    // 最大并发数量，默认是2
    this.maxConcurrency = maxConcurrency;
    // 当前正在执行的任务数量
    this.runningCount = 0;
    // 待执行的任务队列
    this.waitingTasks = [];
  }

  // 添加任务
  addTask(task) {
    this.waitingTasks.push(task);
    // 添加任务后尝试启动执行
    this.run();
  }

  // 执行任务
  async run() {
    // 如果达到最大并发数量，或者没有待执行的任务，就暂停执行
    if (this.runningCount >= this.maxConcurrency || this.waitingTasks.length === 0) {
      return;
    }
    // 取出一个待执行的任务
    const task = this.waitingTasks.shift();
    this.runningCount++;
    try {
      await task();
      console.log('任务执行完成，当前运行任务数:', this.runningCount);
    } catch (error) {
      console.error('任务执行失败:', error);
    } finally {
      // 任务执行完成后，运行数量减1
      this.runningCount--;
      // 继续执行下一个任务
      this.run();
    }
  }
}

// 测试代码
function createAsyncTask(taskName, delay) {
  return () => new Promise(resolve => {
    setTimeout(() => {
      console.log(`任务 ${taskName} 执行完毕，耗时 ${delay}ms`);
      resolve();
    }, delay);
  });
}

// 初始化队列，最大并发数为2
const concurrentQueue = new ConcurrentTaskQueue(2);
// 添加5个任务
concurrentQueue.addTask(createAsyncTask('A', 1000));
concurrentQueue.addTask(createAsyncTask('B', 500));
concurrentQueue.addTask(createAsyncTask('C', 800));
concurrentQueue.addTask(createAsyncTask('D', 600));
concurrentQueue.addTask(createAsyncTask('E', 700));

上面的并发队列设定最大同时执行2个任务，执行顺序是A和B先同时启动，B耗时短先完成，然后启动C，A完成后启动D，以此类推，既保证了任务的有序调度，又提升了执行效率。

任务队列的扩展场景

根据实际需求，我们还可以给任务队列扩展更多功能：

• 添加任务优先级：可以给任务设置优先级参数，高优先级的任务优先执行
• 任务超时控制：给每个任务设置超时时间，超时后自动终止任务执行
• 执行结果回调：任务执行完成后触发回调，返回执行结果或者错误信息
• 队列暂停与恢复：支持暂停队列执行，后续需要时再恢复执行

任务队列是JavaScript异步编程中非常实用的工具，通过自定义实现任务队列，开发者可以灵活管控异步任务的执行流程，解决实际开发中遇到的异步任务管理问题。

JavaScript任务队列js异步编程异步任务修改时间：2026-07-12 07:48:12