JS函数中,对函数调用的时机不同,得到的结果也会不一样,例如 下面这段代码 :

    1. let i = 0
    2. for(i = 0; i<6; i++){
    3. setTimeout(()=>{
    4. console.log(i)
    5. },0)
    6. }

    执行结果如下 :

    JS函数执行时机 - 图1

    结果显示打印出来了6个6,
    为什么没有打印出来0,1,2,3,4,5呢?要了解这点首先我们应该了解函数setTimeout的作用是什么。

    • setTimeout(func,time)函数运行机制
      简单来说,setTimeout(func,time)是在time(毫秒单位)时间后执行func函数。浏览器引擎按顺序执行程序,遇到setTimeout会将func函数放到执行队列中,等到主程序执行完毕之后,才开始从执行队列(队列中可能有多个待执行的func函数)中按照time延时时间的先后顺序取出来func并执行。
      (参考链接:https://blog.csdn.net/I_recluse/article/details/80632321

    回看上面代码,我们发现代码实际表示循环一段时间之后才会执行console.log(i),当i=6的时候循环停止,所以打印出来的才会是6个6。
    如果要打印出来0,1,2,3,4,5的话,可以采用以下代码来实现:

    1. for(let i=0;i<6;i++){
    2. setTimeout(()=>{
    3. console.log(i)
    4. },0)
    5. }

    为什么把let i = 0写入for循环里面就可以实现了呢?因为JS在for和let一起用的时候会加东西,每次循环的时候会多创建一个i。
    那除把初始变量通过了let i = 0写入for循环以外还有别的方法可以打印出来0,1,2,3,4,5。最容易想到的就是根据函数的执行时机可以把 console.log(i)写到setTimeout(()函数之前,我们执行一下看看是不是跟预期的一样:

    1. let i = 0
    2. for(i = 0; i<6; i++){
    3. console.log(i)
    4. setTimeout(()=>{
    5. },0)
    6. }

    执行结果如下:

    JS函数执行时机 - 图2
    在不改变代码顺序的情况下,还可以通过以下方式来实现,通过将setTimeout封装成一个函数,在循环中立即执行他。

    1. function f(x){setTimeout(()=>{
    2. console.log(x)
    3. },0)};
    4. for(var i =0;i<6;i++){
    5. f(i);
    6. }