当前位置:首页 > JavaScript

JS实现一个并发函数

2026-03-02 02:54:36JavaScript

实现并发函数的几种方法

在JavaScript中实现并发控制可以通过多种方式完成,以下是几种常见的实现方法:

使用Promise.all

Promise.all可以并行执行多个Promise,并在所有Promise完成后返回结果数组。适用于需要同时执行多个异步操作且不关心顺序的场景。

const fetchData = (url) => fetch(url).then(res => res.json());

const concurrentRequests = async (urls) => {
  const promises = urls.map(url => fetchData(url));
  return Promise.all(promises);
};

// 使用示例
const urls = ['url1', 'url2', 'url3'];
concurrentRequests(urls).then(results => console.log(results));

使用async/await结合循环

通过async/await和循环结构可以实现更灵活的并发控制,例如限制并发数量。

const runConcurrently = async (tasks, concurrencyLimit) => {
  const results = [];
  const executing = new Set();

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

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

  return Promise.all(results);
};

// 使用示例
const tasks = [() => fetch('url1'), () => fetch('url2')];
runConcurrently(tasks, 2).then(console.log);

使用第三方库

许多第三方库提供了更完善的并发控制功能,如p-limitasync等。

const pLimit = require('p-limit');
const limit = pLimit(3); // 限制并发数为3

const tasks = [
  limit(() => fetch('url1')),
  limit(() => fetch('url2'))
];

Promise.all(tasks).then(console.log);

使用Worker Threads

对于CPU密集型任务,可以使用Node.js的Worker Threads实现真正的并行执行。

const { Worker, isMainThread, parentPort } = require('worker_threads');

if (isMainThread) {
  const worker = new Worker(__filename);
  worker.on('message', msg => console.log(msg));
} else {
  parentPort.postMessage('Worker task completed');
}

每种方法都有其适用场景,选择哪种取决于具体需求。Promise.all适合简单并行任务,自定义函数适合需要精细控制并发的场景,第三方库可以提供更丰富的功能,Worker Threads则适合CPU密集型任务。

JS实现一个并发函数

标签: 函数JS
分享给朋友:

相关文章

vue中实现节流函数

vue中实现节流函数

使用 Lodash 的 _.throttle 方法 安装 Lodash 并导入 throttle 方法: npm install lodash 在 Vue 组件中使用: import { th…

react如何调用函数

react如何调用函数

React 函数调用的方法 在 React 中调用函数可以通过多种方式实现,具体取决于函数的作用和调用时机。以下是常见的几种方法: 直接在组件中调用函数 函数可以在组件的 render 方法或…

react函数如何调用redux

react函数如何调用redux

在React函数组件中调用Redux 使用react-redux库提供的useSelector和useDispatch钩子函数,可以在函数组件中访问Redux状态和派发action。 安装必要依赖:…

react如何定义全局函数

react如何定义全局函数

定义全局函数的几种方法 在React中定义全局函数可以通过多种方式实现,以下是常见的几种方法: 使用全局变量挂载 将函数直接挂载到window对象上,使其成为全局可访问的函数。这种方式简单直接,但…

react组建中如何调用函数

react组建中如何调用函数

在 React 组件中调用函数的方法 React 组件中调用函数的方式取决于函数的定义位置和作用域。以下是常见的几种方法: 在组件内部定义并调用函数 函数可以直接在组件内部定义,并通过事件或生命周…

react高阶函数如何写

react高阶函数如何写

高阶函数的基本概念 高阶函数(Higher-Order Function)是指接收函数作为参数或返回函数的函数。在React中,高阶函数常用于逻辑复用、组件增强或事件处理封装。 接收函数作为参数…