JavaScript For ループ内で非同期プロセスを正しく実行するにはどうすればよいですか?

JavaScript For ループでの非同期プロセスの逐次実行

JavaScript for ループ内で非同期プロセスを作成する場合、次の問題に対処することが重要です。ループ変数の値を維持します。デフォルトでは、非同期プロセスが終了する前にループが完了するため、コールバック関数の変数値が不正になります。

解決策:

1. 関数クロージャの利用:

   ループの反復ごとにインラインまたは外部関数クロージャを作成すると、ループ インデックス変数がクロージャ内で一意にキャプチャされます。これにより、各コールバックが独自のインデックス値にアクセスできるようになります。

   例 1 (インライン クロージャ):

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

   例 2 (外部) Closure):

   (function(i) {
       asynchronousProcess(function() {
           console.log(i);
       });
   })(i);
   ````

2. ES6 Let の活用:

   ES6 準拠の JavaScript 環境が利用可能な場合、let キーワードfor ループの初期化で使用できます。 let はループの反復ごとに一意の変数を作成し、スコープの問題に対処します。

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

3. Promises によるシリアル化:

   非同期プロセスが返された場合Promise は、async と await を使用して一度に 1 つずつ実行するようにシリアル化できます。これにより、順次実行が保証され、各非同期操作が完了するまでループが進行するのを防ぎます。

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

4. Promise.all():

   非同期プロセスを並行して実行し、結果を順番に収集するには、Promise.all() を使用できます。すべての Promise が解決されると、結果の配列を返します。

   function someFunction() {
       let promises = [];
       for (let i = 0; i < 10; i++) {
           promises.push(asynchonousProcessThatReturnsPromise());
       }
       return Promise.all(promises);

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