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)
})
}