JS函数的执行时机

100 阅读1分钟

JS函数的执行时机

//代码1

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

//6
//6
//6
//6
//6
//6

//代码2

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

//0
//1
//2
//3
//4
//5

代码1

代码1中,每次循环都会执行setTimeout(()=>{console.log(i)},0),命令计算机在当前任务完成后立即执行代码,使得console.log(i)在执行完for循环后执行。

//代码1

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

console.log(i)//6
console.log(i)//6
console.log(i)//6
console.log(i)//6
console.log(i)//6
console.log(i)//6

代码2

代码2中,由于let声明变量的特殊性,变量i只在当前循环的当前次生效,执行了setTimeout(()=>{console.log(i)},0)代码后,存在了一个隐藏的快照i,并将console.log(i)排列到任务队列中,此时console.log(i)中的i为快照i。

//代码2

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

console.log(i)//此处的i为快照i=0
console.log(i)//此处的i为快照i=1
console.log(i)//此处的i为快照i=2
console.log(i)//此处的i为快照i=3
console.log(i)//此处的i为快照i=4
console.log(i)//此处的i为快照i=5

//for循环结束后,i变量便消失了

立即执行函数

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

//0
//1
//2
//3
//4
//5