如何在ForEach迴圈內非同步處理後執行回呼函數？-js教程-PHP中文網

如何在ForEach迴圈內非同步處理後執行回呼函數？

Susan Sarandon

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

原創

255 人瀏覽過

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：非同步程式庫使用