《JS 函数的执行时机》

78 阅读1分钟

1.为什么如下代码会打印 6 个 6?

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

答: 首先要知道啥是setTimeout?setTimeout就是尽快做这件事。当你打游戏时,你妈让你快点吃饭,你会先把这把打完,然后再去吃饭。所以当代码进入for循环时,遇到了setTimeout,你会先完成手头上的事(结束for循环),再完成setTimeout中让你做的事(打印i)。
即:每一次for循环都遇到setTimeout,一共6次;当跳出for循环时,i = 6,此时执行setTimeout里的代码,将6打印6次

2. 写出让上面代码打印 0、1、2、3、4、5 的方法

利用ES6的let创建块级作用域

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

3. 其他方法可以打印出 0、1、2、3、4、5

  1. 利用闭包
for(let i=0; i < 6; i++){
    (function(j){
        setTimeout(function(){
            console.log(j);
        },j*1000);
    })(i)
}
  1. 利用setTimeout的第三个参数(传给回调函数的参数)
for(let i = 0; i < 6; i++){
    setTimeout(function(j){
        console.log(j);
    },i*1000,i);
}
  1. 立即执行函数
let i = 0 
for(i = 0; i<6; i++){   
    setTimeout(!function(){
        console.log(i)
    }(),0)
}