ForEach ループ内の非同期処理の後にコールバック関数を実行するにはどうすればよいですか?-jsチュートリアル-php.cn

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 ベースのアプローチ

同期実行:

reduce() と Promise.resolve() を使用して Promise を連鎖させ、同期実行を保証します。

<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: 非同期ライブラリの使用法