为什么此 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中文网其他相关文章！