当前位置:首页 > JavaScript

js实现并发量控制

2026-03-01 17:39:00JavaScript

实现并发量控制的方法

在JavaScript中实现并发量控制通常用于限制同时执行的异步任务数量,避免资源耗尽或服务器过载。以下是几种常见方法:

Promise.all + 分批次执行

将任务数组拆分为多个批次,每个批次使用Promise.all执行:

async function batchTasks(tasks, concurrency) {
  const results = [];
  for (let i = 0; i < tasks.length; i += concurrency) {
    const batch = tasks.slice(i, i + concurrency);
    results.push(...await Promise.all(batch.map(fn => fn())));
  }
  return results;
}

自定义队列实现

创建一个任务队列,动态控制执行中的任务数量:

class ConcurrentQueue {
  constructor(concurrency) {
    this.concurrency = concurrency;
    this.running = 0;
    this.queue = [];
  }

  add(task) {
    return new Promise((resolve, reject) => {
      this.queue.push(() => {
        return task().then(resolve).catch(reject);
      });
      this.next();
    });
  }

  next() {
    while (this.running < this.concurrency && this.queue.length) {
      const task = this.queue.shift();
      this.running++;
      task().finally(() => {
        this.running--;
        this.next();
      });
    }
  }
}

async-pool库实现

使用现成的第三方库如async-pool

import asyncPool from 'tiny-async-pool';

const results = await asyncPool(5, urls, fetchUrl);

Promise.race动态控制

利用Promise.race动态管理执行池:

js实现并发量控制

async function parallelLimit(tasks, limit) {
  const executing = new Set();
  const results = [];

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

    executing.add(p);
    results.push(p);

    if (executing.size >= limit) {
      await Promise.race(executing);
    }
  }

  return Promise.all(results);
}

关键注意事项

  • 错误处理需要单独处理每个任务的失败情况,避免单个失败导致整个流程中断
  • 任务取消功能可以通过添加abort controller实现
  • 进度跟踪可以添加回调函数或事件机制
  • 浏览器环境需注意不同标签页的并发限制

以上方法可根据具体场景选择,简单的并发控制使用Promise.all分批处理即可,复杂场景建议使用队列实现或现成库。

标签: js
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…