JavaScript の非同期 For ループ変数のスコープの問題を回避するにはどうすればよいですか?

JavaScript for ループ内の非同期処理: 変数スコープの問題に対処する

非同期プロセスを利用する for ループ内でイベント ループを実行する場合コールバック関数がループ変数 i の誤った値を取得するという問題がよく発生します。この動作は、非同期操作が終了する前にループが反復を完了するという事実に起因します。その結果、コールバックはすべて i の最終値を参照します。

緩和戦略

この問題に対処し、各コールバックが i:

1.関数クロージャの使用

関数クロージャを利用すると、反復ごとに i の値を一意に取得できます。これは、匿名インライン関数クロージャ:

someArray.forEach((item, i) => {
  asynchronousProcess(() => {
    console.log(i);
  });
});

2 によって実現できます。外部関数の使用

反復ごとに i の一意の値を管理する外部関数を作成できます。この関数は、引数として非同期プロセスに渡すことができます:

const j = 10;
for (let i = 0; i < j; i++) {
  (function(cntr) {
    asynchronousProcess(cntr, (result) => {
      console.log(result); // cntr will hold the correct value of i
    });
  })(i);
}

3. ES6 let

の使用環境が ES6 をサポートしている場合、for ループ宣言内で let キーワードを使用して、反復ごとに一意の i 値を作成できます:

const j = 10;
for (let i = 0; i < j; i++) {
  asynchronousProcess(() => {
    console.log(i);
  });
}

4。 Promise と async/await を使用したシリアル化

このアプローチには、非同期操作を並列ではなく順次に実行するようにシリアル化することが含まれます。 async/await を利用し、非同期プロセスから Promise を返すことで、一度に 1 つの操作のみがアクティブになります。ただし、次の機能をサポートする最新の環境が必要です:

async function someFunction() {
  const j = 10;
  for (let i = 0; i < j; i++) {
    await asynchronousProcess();
    console.log(i);
  }
}

5. Promise.all() による並列実行

目的が非同期操作を並列実行しながらループの順序で結果を収集することである場合は、Promise.all() を使用できます。

以上がJavaScript の非同期 For ループ変数のスコープの問題を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。