【Javascript】 Event Loop

前情提要

event-loop，即事件循环机制，它是由调用栈、微任务队列、消息队列这三部分组成的。

js它是单线程的解释型语言，解释一行 执行一行。

我们将从三个例子逐步理解。

---

例1

在event-loop开始的时候，会从全局一行一行的执行，遇到函数调用 会压入到调用栈中，被压入的函数被称之为帧，当函数返回后会从调用栈弹出。

如上图，在fun2()函数被调用时，fun2()先入栈，执行console.log(2)，控制台打印出2，接着执行fun1()，fun1()入栈，console.log(1)执行，控制台打印1，然后fun1()执行完毕弹出调用栈【懒得做动图了。。】，最后控制台打印3，fun2()执行完毕被弹出调用栈，调用栈被清空。

---

例2

js中的异步操作，比如fetch、setTimeout、SetInterval压入调用栈中的时候，里面的消息会进入到消息队列中，消息队列会等到调用栈清空后再执行。

我们可以看到在调用fun2()时调用栈里的顺序，如同例1一样，每个方法被执行完之后会弹出调用栈，但在这个例子中，setTimeout函数中的消息被放在消息队列中，是在最后调用栈清空才执行。

---

例3

在js中，对于Promise、async、await来说，压入调用栈会立即执行，其中的异步操作会加入到微任务队列中，微任务队列的消息会在调用栈清空时立即执行，其执行顺序排在消息队列之前。

注：resolve()方法会在对象调用then时执行。

 

以上仅为个人学习笔记。