非同期操作による JavaScript のループ反復値の中断を防ぐにはどうすればよいですか?

JavaScript for ループ内の非同期処理: ループ反復値の保持

非同期プログラミングでは、操作は開始され、操作とは独立して実行を継続します。メインスレッド。これにより、非同期操作の結果を for ループなどの同期制御フローの進行状況と同期させようとすると問題が発生する可能性があります。

次の for ループを考慮してください。

let i;
let j = 10;
for (i = 0; i < j; i++) {
  asynchronousProcess(callbackFunction() {
    alert(i);
  });
}

目的は、0 から 10 までの数字を示す一連のアラートを表示することです。ただし、 asynchronousProcess 関数では、ループが数回の反復を完了した後にコールバック関数がトリガーされます。その結果、アラート値が意図した順序で表示されません。

解決策: 関数クロージャを使用してループ値をキャプチャする

この問題に対処するには、次のことが必要です。コールバック関数が呼び出されたときに、ループの各繰り返しに一意の値 i が含まれるようにするためです。これは、関数クロージャ内のループ変数をキャプチャすることで実現できます。

これは、IIFE (即時呼び出し関数式) を使用して実現できます。

for (var i = 0; i < j; i++) {
  (function(cntr) {
    asynchronousProcess(function() {
      alert(cntr);
    });
  })(i);
}

この例では、 i は cntr として IIFE に渡され、関数クロージャによって各反復が独自の一意の値を持つことが保証されます。 i.

または、ループ変数をパラメーターとして受け入れる外部関数を作成できます。

function logIndex(index) {
  console.log(index);
}

for (var i = 0; i < j; i++) {
  asynchronousProcess(logIndex.bind(null, i));
}

ES6 を使用して変数宣言

ES6 の導入により、ブロックスコープ変数を作成する let を使用してループ変数を宣言できるようになりました。これは、ループの各反復に独自の一意の i 値があることを確認する便利な方法を提供します。

for (let i = 0; i < j; i++) {
  asynchronousProcess(function() {
    alert(i);
  });
}

注:

次のことに注意することが重要です。これらの各ソリューションでは、関数の終了時または変数宣言時にループ変数のコピーが作成されます。非同期操作の完了後にループ変数が変更された場合、これらのコピーには更新された値が反映されません。

以上が非同期操作による JavaScript のループ反復値の中断を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。