如何避免 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。使用 Promises 和 async/await 進行序列化

此方法涉及序列化非同步操作以順序運行而不是並行運行。利用 async/await 並從非同步進程返回 Promise 可確保一次只有一個操作處於活動狀態。但是，它需要一個支援以下功能的現代環境：

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

5。使用 Promise.all() 並行執行

如果目標是並行運行非同步操作，但仍按循環順序收集結果，則可以使用 Promise.all()：

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

someFunction().then((results) => {
  console.log(results); // array of results in order
});

以上是如何避免 JavaScript 的非同步 For 迴圈變數作用域問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！