当前位置:首页 > JavaScript

JS实现一个并发函数

2026-01-31 11:38:07JavaScript

实现并发控制的几种方法

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

Promise.all

使用Promise.all可以并行执行多个异步任务,等待所有任务完成后再继续执行后续代码。

JS实现一个并发函数

const task1 = fetch('https://api.example.com/data1');
const task2 = fetch('https://api.example.com/data2');
const task3 = fetch('https://api.example.com/data3');

Promise.all([task1, task2, task3])
  .then(responses => {
    // 所有请求完成后的处理
    console.log('All requests completed');
  })
  .catch(error => {
    console.error('One of the requests failed', error);
  });

async/await结合Promise.all

使用async/await语法可以更清晰地处理并发任务。

async function runConcurrentTasks() {
  try {
    const [result1, result2, result3] = await Promise.all([
      fetch('https://api.example.com/data1'),
      fetch('https://api.example.com/data2'),
      fetch('https://api.example.com/data3')
    ]);
    console.log('All tasks completed');
  } catch (error) {
    console.error('Error in one of the tasks', error);
  }
}

限制并发数的实现

如果需要限制同时执行的并发数,可以使用以下方法:

JS实现一个并发函数

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

  for (const task of tasks) {
    const p = Promise.resolve().then(() => task());
    results.push(p);

    const e = p.then(() => executing.splice(executing.indexOf(e), 1));
    executing.push(e);

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

  return Promise.all(results);
}

// 使用示例
const tasks = [
  () => fetch('https://api.example.com/data1'),
  () => fetch('https://api.example.com/data2'),
  () => fetch('https://api.example.com/data3'),
  // 更多任务...
];

concurrentLimit(tasks, 2)
  .then(results => console.log('All tasks completed with limited concurrency'))
  .catch(error => console.error('Error in limited concurrency', error));

Worker Threads实现并发

在Node.js环境中,可以使用Worker Threads实现真正的并行执行。

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

if (isMainThread) {
  // 主线程代码
  const worker1 = new Worker(__filename);
  const worker2 = new Worker(__filename);

  worker1.on('message', (msg) => console.log('Worker1:', msg));
  worker2.on('message', (msg) => console.log('Worker2:', msg));
} else {
  // 工作线程代码
  parentPort.postMessage('Hello from worker');
}

使用第三方库

对于更复杂的并发控制,可以考虑使用第三方库如p-limitasync库。

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

const tasks = [
  () => fetch('https://api.example.com/data1'),
  () => fetch('https://api.example.com/data2'),
  () => fetch('https://api.example.com/data3'),
];

(async () => {
  const results = await Promise.all(tasks.map(task => limit(task)));
  console.log('All tasks completed with p-limit');
})();

这些方法可以根据具体需求选择使用,从简单的并行执行到复杂的并发控制都可以实现。

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

相关文章

php 函数实现

php 函数实现

PHP 函数实现基础 PHP 函数的定义使用 function 关键字,后跟函数名和参数列表。函数名不区分大小写,但建议保持一致。 function functionName($param1, $p…

JS实现哀悼

JS实现哀悼

实现网页哀悼效果的方法 通过CSS滤镜和全局样式调整,可以快速实现网页整体变灰的哀悼效果。以下是具体实现方式: document.addEventListener('DOMContentLo…

vue中实现节流函数

vue中实现节流函数

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

react如何绑定事件处理函数

react如何绑定事件处理函数

在 React 中绑定事件处理函数的方法 React 提供了多种方式来绑定事件处理函数,以下是常见的几种方法: 使用箭头函数自动绑定 this 在类组件中,可以使用箭头函数来定义方法,这样可以避免…

react箭头函数如何传参

react箭头函数如何传参

箭头函数传参基础语法 箭头函数通过括号内的参数列表接收参数,单参数时可省略括号。例如: const greet = name => `Hello, ${name}!`; console.log…

react函数组件如何强制刷新

react函数组件如何强制刷新

强制刷新React函数组件的方法 在React函数组件中,强制刷新通常不推荐直接操作,因为React的设计理念是基于状态和props的自动更新。但在某些特殊情况下,可能需要手动触发更新。以下是几种常见…