article1

波神的这篇eventLoop文章适合反复重温写的很透彻比其他解读事件机制的文章更加清晰透彻

前端基础进阶十四深入核心详解事件循环机制

setTimeout和setImmediate到底谁先执行本文让你彻底理解Event

Loop

我们一直说JS是单线程的其实指的是js运行的主线程只有一个但是整个运行环境并不是单线程的

js除了主线程外还有定时器线程事件触发线程异步HTTP请求线程

Event

主线程每次执行时先看看要执行的是同步任务还是异步的API同步任务就继续执行一直执行完遇到异步API就将它交给对应的异步线程自己继续执行同步任务异步线程执行异步API执行完后将异步回调事件放入事件队列上主线程上的同步任务干完后就来事件队列看看有没有任务主线程发现事件队列有任务就取出里面的任务执行主线程不断循环上述流程

微任务宏任务

上面只是简化版的Eventloop事件队列还会分为微任务宏任务。

Event

Loop是唯一的可以有一个或多个事件队列但是只有一个微任务队列宏任务包括script整体代码settimeoutsetIntervalsetImmediaterendering微任务包括process.nextTick,

PromisesetTimeout/Promise等我们称之为任务源。

而进入任务队列的是他们指定的具体执行任务来自不同任务源的任务会进入到不同的任务队列。

其中setTimeout与setInterval是同源的微任务队列全部执行完会重新渲染一次每个宏任务执行完都会重新渲染一次requestAnimationFrame处于渲染阶段不在微任务队列也不在宏任务队列它从script(整体代码)开始第一次循环。

之后全局上下文进入函数调用栈。

直到调用栈清空(只剩全局)然后执行所有的micro-task。

当所有可执行的micro-task执行完毕之后。

循环再次从macro-task开始找到其中一个任务队列执行完毕然后再执行所有的micro-task这样一直循环下去。

注意点

非常多的同学对于setTimeout的理解存在偏差。

所以大概说一下误解

setTimeout作为一个任务分发器/任务源头这个函数会立即执行而它所要分发的任务

console.log(golb1);setTimeout(function()

{console.log(timeout1);process.nextTick(function()

{console.log(timeout1_nextTick);})new

{console.log(timeout1_promise);resolve();}).***n(function()

{console.log(immediate1);process.nextTick(function()

{console.log(immediate1_nextTick);})new

{console.log(immediate1_promise);resolve();}).***n(function()

{console.log(immediate1_***n)})

new

{console.log(glob1_promise);resolve();

}).***n(function()

{console.log(timeout2);process.nextTick(function()

{console.log(timeout2_nextTick);})new

{console.log(timeout2_promise);resolve();}).***n(function()

new

{console.log(glob2_promise);resolve();

}).***n(function()

{console.log(immediate2);process.nextTick(function()

{console.log(immediate2_nextTick);})new

{console.log(immediate2_promise);resolve();}).***n(function()

{console.log(immediate2_***n)})

第二步执行过程遇到setTimeout。

setTimeout作为任务分发器将任务分发到对应的宏任务队列中。

第三步执行过程遇到setImmediate。

setImmediate也是一个宏任务分发器将任务分发到对应的任务队列中。

setImmediate的任务队列会在setTimeout队列的后面执行。

第四步执行遇到nextTickprocess.nextTick是一个微任务分发器它会将任务分发到对应的微任务队列中去。

第五步执行遇到Promise。

Promise的***n方法会将任务分发到对应的微任务队列中但是它构造函数中的方法会直接执行。

因此glob1_promise会第二个输出。

其中nextTick队列会比Promie先执行。

nextTick中的可执行任务执行完毕之后才会开始执行Promise队列中的任务。

当所有可执行的微任务执行完毕之后这一轮循环就表示结束了。

下一轮循环继续从宏任务队列开始执行。

只有当setTimeout中所有的任务执行完毕之后才会再次开始执行微任务队列。

并且清空所有的可执行微任务。

setTiemout队列产生的微任务执行完毕之后循环则回过头来开始执行setImmediate队列。

仍然是先将setImmediate队列中的任务执行完毕再执行所产生的微任务。

当setImmediate队列执行产生的微任务全部执行之后第二轮循环也就结束了。

当我们在执行setTimeout任务中遇到setTimeout时它仍然会将对应的任务分发到setTimeout队列中去但是该任务就得等到下一轮事件循环执行了。

例子中没有涉及到这么复杂的嵌套大家可以动手添加或者修改他们的位置来感受一下循环的变化。

//执行第一轮宏任务队列macro

//执行第二轮宏任务setTimeout产生的微任务队列micro

timeout1_nextTick

//执行第二轮宏任务setImmediate产生的微任务队列micro

immediate1_nextTick