0

0

JavaScript并发控制模式

夢幻星辰

夢幻星辰

发布时间:2025-11-03 14:57:02

|

547人浏览过

|

来源于php中文网

原创

JavaScript中通过限制异步任务并发数避免资源过载,常用方法包括:1. 手动用Promise维护队列和活跃任务数;2. 用async/await结合Promise.race实现简化控制;3. 使用p-limit等第三方库。

javascript并发控制模式

JavaScript中的并发控制主要用于限制同时执行的任务数量,避免资源过载或接口限流。由于JavaScript是单线程语言,所谓的“并发”更多是指异步任务的协调与调度,特别是在处理大量Promise或异步请求时,合理的控制机制能提升稳定性和性能。

1. 并发控制的基本场景

当你需要发起100个HTTP请求时,如果全部同时发出,可能造成浏览器阻塞、服务端压力过大或触发限流策略。理想做法是只允许固定数量(如5个)请求同时进行,完成一个后再发起下一个。

常见应用场景包括:

  • 批量上传或下载文件
  • 爬虫抓取多个页面
  • 定时轮询多个接口
  • 资源密集型计算任务调度

2. 使用Promise + 队列实现并发控制

通过维护一个任务队列和活跃任务数,可以手动控制并发。核心思路是:当活跃任务少于最大并发数时,从队列中取出任务执行。

立即学习Java免费学习笔记(深入)”;

function concurrencyControl(tasks, maxConcurrent) {
  let index = 0;
  let activeCount = 0;
  let resolvedCount = 0;
  const results = Array(tasks.length);

  return new Promise((resolve) => {
    function next() {
      if (index >= tasks.length && activeCount === 0) {
        resolve(results);
        return;
      }

      while (activeCount < maxConcurrent && index < tasks.length) {
        const i = index;
        const task = tasks[index++];
        activeCount++;

        task()
          .then((res) => {
            results[i] = { status: 'fulfilled', value: res };
          })
          .catch((err) => {
            results[i] = { status: 'rejected', reason: err };
          })
          .finally(() => {
            activeCount--;
            next();
          });
      }
    }
    next();
  });
}

使用方式:

Banner手风琴jQuery插件
Banner手风琴jQuery插件

Banner手风琴jQuery插件是一款兼容IE8浏览器,支持点击和鼠标滑过2种模式,并且可以制作图片的描述信息效果。

下载
const tasks = Array(10).fill().map((_, i) => () =>
  fetch(`/api/data/${i}`).then(res => res.json())
);

concurrencyControl(tasks, 3).then(results => {
  console.log('所有任务完成:', results);
});

3. 基于async/await的简化实现

利用async函数和递归调用,可以让逻辑更清晰。

async function runWithLimit(tasks, limit) {
  const results = [];
  const executing = [];

  for (const task of tasks) {
    const p = task().then(res => {
      results.push(res);
      return res;
    });
    
    executing.push(p);

    if (executing.length >= limit) {
      await Promise.race(executing); // 等待任意一个完成
      executing.splice(executing.indexOf(p), 1);
    }
  }

  await Promise.all(executing); // 等待剩余任务
  return results;
}

这个版本使用Promise.race来释放已完成的任务槽位,适合对顺序要求不高的场景。

4. 使用第三方库(如p-limit)

实际项目中推荐使用成熟库,例如 p-limit,简洁且经过充分测试。

import pLimit from 'p-limit';

const limit = pLimit(3); // 最大并发3

const promises = urls.map(url =>
  limit(() => fetch(url).then(r => r.text()))
);

const results = await Promise.all(promises);

它内部实现了高效的调度逻辑,支持错误传播和取消操作,适合生产环境。

基本上就这些常见的并发控制模式。关键在于理解任务调度机制,根据场景选择手动实现或使用工具库。不复杂但容易忽略细节,比如错误处理和结果顺序。合理控制并发能显著提升程序健壮性。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1157

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

215

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2022

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

22

2026.01.19

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

525

2023.08.10

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

306

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

406

2023.10.12

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

434

2023.11.09

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

8

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号