JS 函数的执行时机

JS函数的不同执行时机，会影响到函数运行的输出结果，不能通过代码本身百分百判断函数输出什么，而是要根据函数具体的执行时机。

1 看下方代码

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

在这里插入图片描述

上面的代码执行输出了6个6，为什么呢？因为setTimeout是一个异步任务，执行到这里的操作会被浏览器丢到另一个任务队列里去，浏览器这时候会继续往下执行，把下面的代码都执行完了才会来执行setTimeout函数里的操作，这时候因为for循环已经把i加到6了，所以输出的全部都是6.

2 怎么样让上面代码打印 0、1、2、3、4、5 ？

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

在这里插入图片描述

将i定义到for循环体中，输出的就是我们想要的结果了，为什么呢？

因为let变量的作用域只能在当前函数中，所以每次for循环生成的都是一个新的i，setTimeout里输出的i就是这个新的i，这个i是不会变化的，所以输出的就是正常的。

3 除了使用 for let 配合，还有什么其他方法可以打印出 0、1、2、3、4、5

3.1 使用函数闭包，我们定义一个匿名函数,并且把当前的i当做value传进入输出，即可打印出正确结果

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

在这里插入图片描述

3.2 利用setTimeout的第三个参数,将i传进去当做value打印出来即可

let i
for(i = 0; i<6; i++){

          setTimeout((value)=>{
            console.log(value)
          },0,i)

}

在这里插入图片描述

3.3 利用const关键字

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

在这里插入图片描述