JS 函数的执行时机

125 阅读1分钟

以下代码会打印出六个6

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

原因:setTimeout()函数;先执行完for循环,然后再setTimeout()里面的代码,当for循环执行完后,i最后的值为6,再执行setTimeout()里面的代码,所以就打印输出 6个6

以下代码可以打印出0、1、2、3、4、5

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

原因:变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。所以就算是for和setTimeout()执行的顺序不变,但是打印输出的还是本次循环i的值。

其他做法打印出0、1、2、3、4、5

1.利用setTimeout第三个参数

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

2.利用闭包

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