对具有不同输出的类似 for 循环感到困惑

Question

在了解范围和闭包时，我发现了一篇让我感到困惑的文章 (https://wsvincent.com/javascript-scope-closures/)

如果我在块上包含一个 setTimeout 以在 for 循环内执行，我会在循环结束后得到 setTimeout 的输出。但是，如果我使用在循环内调用的自定义函数，则不会发生这种情况。

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

// Outputs
// 1
// 2
// 3
// 4
// 5
// "i: 1"
// "i: 2"
// "i: 3"
// "i: 4"
// "i: 5"

for (let i=1; i<=5; i++) {
  console.log(i);
  function count () {
    console.log('i: ' + i);
  }
  count();
}

//Outputs
// 1
// "i: 1"
// 2
// "i: 2"
// 3
// "i: 3"
// 4
// "i: 4"
// 5
// "i: 5"

为什么先从 1 到 5 再记录 setTimeout？

Answer 1

The setTimeout() method calls a function or expression after a specified number of milliseconds.

在 for 循环中，您设置了 1000 毫秒。 这就是为什么在打印 1 到 5 后调用它的原因

Answer 2

发生这种情况是因为setTimeout() 创建了异步行为，因为它仅在指定延迟（在您的情况下为 1000 毫秒）之后运行回调函数（该函数作为参数传递）。

因此，for 循环几乎立即运行，因为它只执行 console.log 您的 i 变量。 （它可能会在不到毫秒的时间内执行）然后你的超时将发生并输出i的值。

诀窍是：你的变量 i 属于 for 闭包范围，因此它会输出增量值。

如果你的变量是在 for 语句外面声明的，你的超时 console.log 每次都会输出 5。