【前端基础知识】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与大家分享,一起进步,加油。

猜你喜欢

转载自blog.csdn.net/weixin_46318413/article/details/121943131