如何在ForEach循环内异步处理后执行回调函数？-js教程-PHP中文网

如何在ForEach循环内异步处理后执行回调函数？

Susan Sarandon

发布： 2024-11-04 15:10:02

原创

260 人浏览过

How to Execute a Callback Function After Asynchronous Processing within a ForEach Loop?

异步迭代处理后回调完成

问题陈述：

给定一个元素数组，我们如何调用forEach 循环中的所有异步处理完成后的回调函数？

解决方案 1：基于计数器的方法

在每个异步回调中增加一个计数器。
当计数器达到元素总数时执行“done”回调。

<code class="javascript">function callback () { console.log('all done'); }

var itemsProcessed = 0;

[1, 2, 3].forEach((item, index, array) => {
  asyncFunction(item, () => {
    itemsProcessed++;
    if(itemsProcessed === array.length) {
      callback();
    }
  });
});</code>

登录后复制

解决方案 2：基于 Promise 的方法

同步执行：

链式promise使用reduce()和Promise.resolve()保证同步执行。

<code class="javascript">let requests = [1, 2, 3].reduce((promiseChain, item) => {
  return promiseChain.then(() => new Promise((resolve) => {
    asyncFunction(item, resolve);
  }));
}, Promise.resolve());

requests.then(() => console.log('done'));</code>

登录后复制

异步执行：

使用map()创建一个promise数组。
当所有promise都完成时，使用Promise.all()调用“done”回调已解决。

<code class="javascript">let requests = [1, 2, 3].map((item) => {
  return new Promise((resolve) => {
    asyncFunction(item, resolve);
  });
});

Promise.all(requests).then(() => console.log('done'));</code>

登录后复制

解决方案 3：异步库使用