JS 函数的执行时机

吐槽君 分类:javascript

关于var、let在setTimeout输出不同的问题。

情况1:先看代码,打印结果是六次6

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

 

image.png
如图所示,放到浏览器控制台执行,发现打印六次数字6。
是因为let在外面声明了全局变量i,setTimeout定时器虽然执行时间为0ms,但仍然是延迟执行,等到for循环完成才去执行,for循环完成时i自增到6,这是setTimeout函数打印六次数字6。

情况2:打印 0、1、2、3、4、5

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

放到浏览器控制台执行:

image.png
因为let是在函数里面声明变量,是局部变量,作用域在for循环里面,每次for循环都会生成新的i,i的值都是独立的,打印六次分别是0,1,2,3,4,5。

还有什么其他方法可以打印出 0、1、2、3、4、5?

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

image.png
先用let声明全局变量i,然后执行for循环,setTimeout定时器会延迟执行,由于const a = i,const也是局部变量,const 声明常量,一旦声明,值就不能改变,最终打印出0、1、2、3、4、5。

最后的方法

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

image.png

回复

我来回复
  • 暂无回复内容