对这种具有不同输出的类似 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

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

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

的值

技巧如下：您的变量 i 属于 for 闭包作用域，因此它将输出增量值。

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

Answer 2

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

在 for 循环中你设置了 1000 毫秒。这就是为什么在打印 1 到 5 之后它被称为

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

Confused about this similar for loops with different outputs

javascript

closures

settimeout