JavaScript 'for' 循环中的'setTimeOut' 调用，为什么它们会失败？ [复制]

Question

让我澄清一下我的问题。我不是在问如何使以下代码工作。我知道您可以使用 let 关键字或 iffe 来捕获它自己的 i 值。我只需要说明如何在以下代码中访问值i。我阅读了以下博客文章，了解以下代码如何不起作用。 Blog post

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

作者声称代码将不起作用，因为我们将变量 i 作为引用而不是值传递。也就是说，我们不是在每次迭代中提供i 的值，而是将变量提供给setTimeout 中的回调作为参考。实际上，当循环终止并触发回调时，我们将引用变量i，即 6。这是它的工作原理吗？

这是我的理解。我的理解是，当循环被执行时，我们没有向setTimeout 函数的回调“传递”任何东西。我们只是设置异步调用。当闭包回调函数执行时，它们会根据词法范围规则查找变量i。也就是说，闭包在作用域中看起来是回调已经结束了，在这种情况下，这也是 6，因为它是在 for 循环完成之后完成的。

它是哪一个，该函数是根据在每次迭代中作为引用传递的变量还是因为词法作用域而将 i 的值解析为 6？

Answer 1

你是正确的，词法范围是这种行为的原因。当计时器函数运行时（将在当前运行的代码完成之后），它们会尝试解析i，并且必须查找scope chain 才能找到它。由于词法作用域，i 在作用域链中仅存在一次（比计时器函数高一个作用域），此时，i 为 6，因为此时循环已终止。

var 关键字使 JavaScript 中的变量具有函数或全局范围（基于声明所在的位置）。在您的代码中，var i 导致 i 变量全局存在（因为您的代码不在函数内部），并且每个计时器函数必须在最终运行时解析相同的单个 i。由于计时器函数在循环完成之前不会运行，i 处于循环导致它的最后一个值 (6)。

将var i改为let ito create block scope换成i即可解决问题。

let 为变量创建块范围。在循环的每次迭代中，您再次进入循环块，并为 i 创建一个单独的范围，每个计时器函数都可以访问它自己。

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

Answer 2

让我用你的代码解释一下：

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

在函数setTimeout()被触发的那一刻，i的变量将等于你所期望的1,2,3,4,5，直到i的值增加到6并且停止 for 循环。

   var i = 1;
   setTimeout(function() { console.log(i); }, 1000*1);
   i++;
   setTimeout(function() { console.log(i); }, 1000*2);
   i++;
   setTimeout(function() { console.log(i); }, 1000*3);
   i++;
   setTimeout(function() { console.log(i); }, 1000*4);
   i++;
   setTimeout(function() { console.log(i); }, 1000*5);
   i++;
   // Now i = 6 and stop the for-looping.

一段时间后会触发timeout的回调，并做控制台日志i的值。看看上面，正如我所说，i 的值已经是 6。

    console.log(i) // i = 6 already.
    console.log(i) // i = 6 already.
    console.log(i) // i = 6 already.
    console.log(i) // i = 6 already.
    console.log(i) // i = 6 already.

原因是缺少 ECMAScript 5：block scope。 (var i = 1;i <=5 ;i++) 将创建一个变量，该变量将存在于整个函数中，并且可以在局部作用域或闭包作用域内被函数修改。这就是我们在 ECMAScript 6 中使用 let 的原因。

将var改为let即可轻松修复：

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