为什么'for”循环中的'setTimeout”打印出意外的值，如何解决这个问题？-js教程-PHP中文网

为什么'for”循环中的'setTimeout”打印出意外的值，如何解决这个问题？

Barbara Streisand

发布： 2024-12-15 21:13:11

原创

613 人浏览过

Why Does `setTimeout` in a `for` Loop Print Unexpected Values, and How Can This Be Fixed?

使用 setTimeout 在 for 循环中连续打印值

问题：

在下面脚本中，setTimeout 函数在 for 循环中使用，以按顺序发出警报值。但是，结果输出显示值“3”打印了两次，而不是预期的“1”和“2”。

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

登录后复制

原因：

出现问题的原因是 for 循环中 i 的值随着时间的推移而修改，但 setTimeout 函数仅捕获对原始值的引用

解决方案：

要解决此问题，应将 i 变量捕获为每个超时函数的唯一值。这可以通过创建一个新函数来实现，该函数将 i 作为参数，然后使用此参数调用 setTimeout：

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

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

登录后复制

使用这种方法，循环的每次迭代都会创建 i 变量的不同副本，确保警报值按预期连续打印。

以上是为什么'for”循环中的'setTimeout”打印出意外的值，如何解决这个问题？的详细内容。更多信息请关注PHP中文网其他相关文章！