事件循环机制由三部分构成:

• 调用栈(call stack)
• 微任务队列(Microtask Queue)
• 消息队列(Message Queue)

event-loop 开始的时候会从全局一行一行的执行,遇到函数调用,会将任务压入调用栈中,被压的函数称之为帧(Frame),当函数返回后会从调用栈中弹出

同步代码执行

来看下面一断代码的执行:

当func2()执行时,先执行console.log(2),执行完毕后弹出.

此时func1()进入调用栈:

进入func1()时,console.log(1)被压入调用栈,执行,弹出,

console.log(3)被压入

最后结果:

异步代码:加入 setTimeout

在上面一段代码加入setTimeout后

(简略了func1的过程)

执行到setTimeout(fetch,setInterval)后,其中的代码会压入消息队列中,等待调用栈的同步代码执行完成后再调用

所以最后的结果:

异步代码:加入 Promise

当加入Promise(async await)时,Promise中的异步代码会压入微队列,等待同步代码执行完毕后,将微队列中的代码按顺序压入调用栈.

而消息队列中的代码需要等微队列中的代码清空后才能继续执行.

最终结果:

总结一下事件循环的代码执行优先级:

同步代码>Promise(async await)>setTimeout(fetch,setInterval)