首頁 > web前端 > js教程 > 如何在ForEach迴圈內非同步處理後執行回呼函數?

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

Susan Sarandon
發布: 2024-11-04 15:10:02
原創
278 人瀏覽過

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

  • 利用 async 等程式庫來簡化非同步程式模式。
  • 請參閱庫提供的回調完成機制的具體文件。

以上是如何在ForEach迴圈內非同步處理後執行回呼函數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板