Event Loop理解与setTimeout被推入任务队列时机

177 阅读1分钟

event loop机制解释:

执行过程如下: JavaScript引擎首先从macrotask queue中取出第一个任务, 执行完毕后,将microtask queue中的所有任务取出,按顺序全部执行; 然后再从macrotask queue中取下一个, 执行完毕后,再次将microtask queue中的全部取出; 循环往复,直到两个queue中的任务都取完。

解释: 代码开始执行时,所有这些代码在macrotask queue中,取出来执行之。 后面遇到了setTimeout,又加入到macrotask queue中, 然后,遇到了promise.then,放入到了另一个队列microtask queue。 等整个execution context stack执行完后, 下一步该取的是microtask queue中的任务了。 因此promise.then的回调比setTimeout先执行。

setTimeout被推入任务队列时机:

先看一段代码

 setTimeout(function () {
   console.log('abc')
 }, 1000)
 for (var i = 0; i <= 800000000; i++) {
    if (i == 800000000) {
       console.log(i)
    }
 }

若只执行下面的for循环,大约3.4秒会输出800000000。当在上方加入setTimeout时,发现大约3.4秒钟输出800000000后接着立刻输出abc。把setTimeout里的1000改成2000或3000发现也是立马输出。但当改成9000后发现要等6秒左右才输出。这说明setTimeout里的函数在setTimeout执行的时候,就开始计时,计时完成就进入任务队列,当执行栈执行完就开始执行任务队列。