為什麼此 JavaScript 循環會使用「setTimeout」產生意外結果？

非同步執行循環和setTimeout

考慮以下腳本：

for (var i = 1; i <= 2; i++) {
  setTimeout(function () { alert(i) }, 100);
}

與1 和2 的預期值相反，腳本輸出3 兩次。這種行為的出現是由於 JavaScript 事件循環的非同步特性。

了解 JavaScript 事件循環

JavaScript 的事件循環分兩個階段處理程式碼執行：同步堆疊和非同步佇列。同步程式碼會在堆疊中立即執行，而非同步程式碼（例如 setTimeouts）會放入佇列中稍後執行。

循環的問題

在腳本中，setTimeout 回調函數使用變數 i。但是，i 在循環的所有迭代之間共享，並且在回調執行時，它始終引用最終值 2。因此，兩次都會列印 3。

正確的方法

為了確保列印連續的值，請為每個回呼函數建立 i 的不同副本。這可以使用函數閉包來實現，如下所示：

function doSetTimeout(i) {
  setTimeout(function () {
    alert(i);
  }, 100);
}

for (var i = 1; i <= 2; ++i) doSetTimeout(i);

在此腳本中，doSetTimeout 函數捕獲i 的值作為其閉包的局部變量，確保每個回調函數使用正確的值。

以上是為什麼此 JavaScript 循環會使用「setTimeout」產生意外結果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！