javascript - 为什么这段 Javascript 代码在执行时会打印 6 五次，以及如何打印？

Question

这是一段代码，执行时在一秒间隔内给出 6，五次。有人可以向我详细解释一下吗？

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

Answer 1

变量i是 timer 关闭的一部分功能。 当 timer函数被执行， 它将打印 i 的值当时。 当发生这种情况时，循环已经完成， 所以 i 的值是 6。 对于 timer 的所有 5 次执行, 所以你会看到 6 打印了 5 次。 您还期望什么？

如果您想打印从 1, 2, ..., 5 开始的计数，并在其间设置超时， 然后传递i的当前具体值进入闭包， 使用立即计算的函数表达式:

for (var i = 1; i <= 5; i++) {
  setTimeout(function (value) {
    return function timer() {
      console.log(value);
    }
  }(i), i*1000);
}

另一个等效的变体:

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

请注意，在两个示例中变量 value是在内部函数的闭包中定义的，并且 value 的不同实例在 for 的每次迭代中创建环形， 值为i在迭代时。 这是与问题中的代码的关键区别。