如何防止非同步操作破壞 JavaScript 中的循環迭代值？

JavaScript for 循環中的非同步處理：保留循環迭代值

在非同步程式設計中，操作的啟動和繼續執行獨立於主線程。當嘗試將非同步操作的結果與同步控制流（例如 for 迴圈）的進度同步時，這可能會導致問題。

考慮以下 for 迴圈：

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

objetivo 是顯示一系列從 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 let 變數宣告

隨著ES6的引入，可以使用let 宣告循環變量，這會建立區塊作用域變數。這提供了一種方便的方法來確保循環的每次迭代都有自己唯一的i 值：

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

注意：

重要的是要注意這些解決方案中的每一個都在函數關閉或變數宣告時建立循環變數的副本。如果在非同步操作完成後修改循環變量，這些副本將不會反映更新後的值。

以上是如何防止非同步操作破壞 JavaScript 中的循環迭代值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！