JS 函数的执行时机

这篇文章主要讲解JS函数执行的时机，在笔试中我们经常会遇到使用 for 循环延时输出 i 的值这类面试题，下面就用这道题来对JS函数执行的时机进行说明

1. let i = 0 放在 for 循环外面

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

例如上面这段代码，输出的结果不是 0，1，2，3，4，5而是 6，6，6，6，6，6

这是因为循环会先被执行，当循环执行结束后 i 的值为 6，之后再执行六次 console.log(i) 操作

setTimeout 函数是让语句尽快执行，但不是现在，会有一定的延迟，在延迟的这段时间中函数完成了 for 循环，所以六次打印操作会在循环结束后一起执行，此时 i 的值为 6 ，所以打印的结果为 6 个 6

2. let i = 0 放在 for 循环里面

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

如果我们将 let i=0 放入 for 循环中，我们就会发现打印出来的是 0，1，2，3，4，5

这是因为 JS 在 for 和 let 一起使用时会在每一次循环多创建一个 i ，所以我们延时打印出来的 i 实际上是 6 个不同的 i ，此时 setTimeout 函数就失去了作用

3. 使用 var i = 0

无论是在 for 循环里面还是外面使用 var i = 0 ，都会定义一个全局变量 i ，所以var i = 0 放在 for 循环里面或者外面结果都一样，都是 6 个 6 ，与 let i = 0 放在 for 循环外面的结果一样

for(var i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}