当前位置:首页 > JavaScript

JS实现一个并发函数

2026-01-31 11:38:07JavaScript

实现并发控制的几种方法

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

Promise.all

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

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);
  }
}

限制并发数的实现

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

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实现一个并发函数

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

相关文章

php 函数实现

php 函数实现

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

vue实现函数曲线

vue实现函数曲线

Vue 实现函数曲线的方法 在 Vue 中实现函数曲线通常需要结合 HTML5 的 Canvas 或 SVG 技术,以及 JavaScript 的数学计算能力。以下是几种常见的方法: 使用 Can…

vue防抖函数实现

vue防抖函数实现

防抖函数原理 防抖(Debounce)是一种限制函数频繁调用的技术,在事件被触发后延迟执行,若在延迟时间内再次触发,则重新计时。适用于输入框搜索、窗口大小调整等场景。 Vue 中实现防抖的三种方式…

vue组件实现函数调用

vue组件实现函数调用

实现 Vue 组件函数调用的方法 在 Vue 组件中实现函数调用可以通过多种方式完成,以下是常见的几种方法: 通过 methods 定义并调用函数 在 Vue 组件的 methods 选项中定…

JS如何调用react组件

JS如何调用react组件

调用React组件的常见方法 在JavaScript中调用React组件通常涉及以下几种场景和方式: 直接渲染组件 通过ReactDOM.render()方法将组件渲染到DOM节点: impo…

react如何定义全局函数

react如何定义全局函数

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