首页 > 文章 > 前端

JavaScript异步控制技巧分享

时间：2025-07-22 20:23:37 110浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript异步并发控制技巧》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

JavaScript异步操作的并发限制是通过控制同时执行的任务数量来保障系统稳定性和用户体验。1. 使用Promise和async/await实现时，维护一个任务队列和运行任务计数器，根据最大并发数递归执行任务；2. 可借助第三方库如p-limit简化操作，通过包装任务函数自动管理并发；3. 也可使用队列库如async.queue进行任务调度。并发限制可避免服务器过载、客户端资源耗尽、请求拥塞等问题。选择合适的并发数需综合考虑服务器性能、网络状况、API限制和客户端性能等因素，通常通过压力测试逐步调整。并发限制不同于节流和防抖，其关注点在于控制同时运行的任务数量，而非事件触发频率。

JavaScript中异步操作的并发限制

JavaScript异步操作的并发限制，简单来说，就是控制同一时刻有多少个异步任务在执行，防止资源耗尽或请求拥塞。想象一下，你一下子发起了100个网络请求，服务器可能会崩溃，浏览器也可能卡死。并发限制就是为了避免这种情况。

控制并发数量，保证系统稳定性和用户体验。

如何在JavaScript中实现异步并发限制？

实现并发限制的方法有很多，核心思想都是维护一个任务队列，以及一个正在执行的任务计数器。当计数器小于最大并发数时，就从队列中取出任务执行，任务完成后计数器减一。

1. 使用Promise和async/await：

这是最常见也是最优雅的方式。我们可以创建一个控制并发的函数：

async function limitConcurrency(tasks, concurrency) {
  const queue = [...tasks]; // 复制一份任务数组，避免修改原数组
  const results = [];
  let running = 0;

  return new Promise((resolve, reject) => {
    const runTask = async () => {
      if (queue.length === 0 && running === 0) {
        resolve(results);
        return;
      }

      if (running < concurrency && queue.length > 0) {
        running++;
        const task = queue.shift();
        try {
          const result = await task();
          results.push(result);
        } catch (error) {
          reject(error); // 任何任务失败，直接reject
        } finally {
          running--;
          runTask(); // 递归调用，继续执行任务
        }
      }
    };

    // 初始启动并发数量的任务
    for (let i = 0; i < concurrency && i < tasks.length; i++) {
      runTask();
    }
  });
}

// 示例：
const tasks = Array.from({ length: 10 }, (_, i) => () => {
  return new Promise(resolve => {
    const delay = Math.random() * 1000; // 模拟不同任务耗时
    setTimeout(() => {
      console.log(`Task ${i + 1} finished after ${delay.toFixed(0)}ms`);
      resolve(`Result of task ${i + 1}`);
    }, delay);
  });
});

limitConcurrency(tasks, 3) // 限制并发数为3
  .then(results => {
    console.log("All tasks completed:", results);
  })
  .catch(error => {
    console.error("An error occurred:", error);
  });

这个例子中，limitConcurrency函数接收一个任务数组和一个并发数作为参数。它使用一个running变量来记录正在执行的任务数量，并递归调用runTask函数来启动新的任务。当所有任务都完成时，Promise resolve。如果任何任务失败，Promise reject。注意这里的错误处理，任何任务失败都会直接拒绝整个Promise，这是一种策略，你可以根据需求修改。

2. 使用第三方库：

有很多第三方库可以简化并发控制，比如p-limit。

const pLimit = require('p-limit');

const limit = pLimit(3); // 限制并发数为3

const tasks = Array.from({ length: 10 }, (_, i) => () => {
  return new Promise(resolve => {
    const delay = Math.random() * 1000;
    setTimeout(() => {
      console.log(`Task ${i + 1} finished after ${delay.toFixed(0)}ms`);
      resolve(`Result of task ${i + 1}`);
    }, delay);
  });
});

(async () => {
  const results = await Promise.all(tasks.map(task => limit(task)));
  console.log("All tasks completed:", results);
})();

p-limit库提供了一个简单的limit函数，它可以包装你的异步任务，并自动控制并发数。使用起来非常方便。

3. 使用队列库：

像async.queue这样的库也提供了并发控制的功能。