JS函数的执行时机

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

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

执行结果如下 :

JS函数的执行时机
文章图片

结果显示打印出来了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的话,可以采用以下代码来实现:
for(let i=0; i<6; i++){ setTimeout(()=>{ console.log(i) },0) }

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

执行结果如下:

JS函数的执行时机
文章图片
【JS函数的执行时机】在不改变代码顺序的情况下,还可以通过以下方式来实现
  • 通过 setTimeout 的第三个参数,将i传进去,代码如下:
let i=0 for(i = 0; i<6; i++){ setTimeout((value)=>{ console.log(value) },0,i) }

    推荐阅读