带有 setTimeOut 意外输出的循环

Question

这是怎么回事？我不明白我们是如何得到那个输出的。

for (var i = 1; i <=4; i++) {
    (function(j) {
    setTimeout(function() {
    console.log(j);
    },j*1000);
    })(i)
}

// 输出：未定义，以第二个间隔记录 1、2、3、4。

Answer 1

for (var i = 1; i <=4; i++) {
  ...
}

创建一个迭代四次的循环。 i的值在第一次迭代时是1，然后是2，然后是3，然后是4。

(function(j) {
  ...
})(i)

创建一个带有一个参数 j 的匿名函数，并通过传递值 i 立即调用它。这称为 IIFE，您可以在 What is the (function() { } )() construct in JavaScript? 阅读更多相关信息。因此，j 是 i 的值，但不会随着 i 的变化而变化。

setTimeout(function() {
  ...
},j*1000);

设置一定的毫秒数超时，超时后执行函数。请注意 setTimeout 立即退出，它只是安排函数稍后执行。在 JavaScript 世界中，这称为异步执行。

console.log(j);

在控制台上打印 1、2、3 或 4。请记住，由于 setTimeout，这将在 1、2、3 或 4 秒后发生。

因此，for 几乎是即时执行的，因为它所做的唯一工作就是为未来安排四个功能。此执行的值为 undefined，如果您在那里执行该代码段，它将打印到控制台。片段退出 1000 毫秒后，第一个调度函数被触发，并打印其局部变量 j（即 1）的值。循环后 2000 毫秒（打印 1 后 1 秒），执行下一个预定函数，打印 2。这种情况又发生了两次。

带有 setTimeOut 意外输出的循环

For loop with setTimeOut unexpected output

for-loop

settimeout