【前端基础知识】event-loop事件循环机制（超级好理解，必学知识点，推荐收藏）

是什么？

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

大家有时候做项目的时候，老是发现最终的顺序不是按照自己的想法来执行，其实问题就在于不清楚event-loop的事件循环机制。

 如何使用？

情景一：event-loop开始的时候，会从全局一行一行地执行，遇到函数调用会压到调用栈中，当函数返回后会从调用栈中弹出。

流程：本题中含有两个函数定义以及一个函数调用。当fun2()被调用时，会被压到调用栈中，开始执行函数，首先会输出"2"；然后调用fun1()，fun1()被压到调用栈中，开始执行fun1()，输出"1"，fun1()执行完成后从调用栈弹出；继续执行fun2()，输出"3"。

情景二：js中的异步操作（fetch、setTimeout、setInterval）压入到调用栈中的时候，里面的消息会进到消息队列中，消息队列会等到调用栈清空之后再执行。

流程：本题中含有两个函数定义以及一个函数调用。当fun2()被调用的时候，会被压到调用栈中，开始执行函数，因为一开始遇到了setTimeout的异步操作，所以console.log(2)会先进到消息队列，等调用中函数全部执行完后再执行消息队列中的消息。然后执行fun1()，输出"1"，fun1()函数弹出调用栈；继续执行fun2()，输出"3"；所有函数执行完毕，才可以执行消息队列中的消息，输出"2"。

情景三：promise、async、await的异步操作的时候会加入到微任务里去，会在调用栈清空的时候立即执行。调用栈中加入的微任务会立马执行。微任务队列（微任务）比消息队列（宏任务）先执行。

流程：首先，因为调用栈中加入的微任务会立马执行，所以先执行Promise中的内容，输出"4"，resolve(5)也会立即被执行（但是resolve的输出在.then），执行完毕后promise里的内容都被弹出调用栈；然后fun2()被调用的时候，压入调用栈，遇到setTimeout，里面的消息会被放到消息队列中；执行fun1()，输出"1"；然后执行console.log(3)，输出"3"；然后执行.then，then里的消息会被放入微任务队列中，当调用栈所有的函数都被执行完毕后，先执行微任务队列的内容，输出"5"；最后执行消息队列中的内容，输出"2"；

以上就是event-loop的所有内容，我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。