js学习-event loop

最新推荐文章于 2024-11-13 17:27:29 发布

霸气灬剑意

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量69

点赞数

分类专栏： js学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43762607/article/details/115675816

版权

js学习专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript的事件循环（Event Loop）机制，包括调用栈、微任务队列和消息队列的概念。通过示例解析了同步和异步操作如何影响执行顺序，特别是setTimeout和Promise的执行特性。深入理解这一机制对于优化JavaScript代码和处理异步问题至关重要。

摘要由CSDN通过智能技术生成

event loop

事件循环机制由三部分组成：1.调用栈 2.微任务队列 3.消息队列。
event-loop开始的时候会从全局一行一行的执行遇到函数调用会压入到调用栈中被压入的函数被称之为帧当函数返回后会从调用栈中弹出。

function fun1() {
            console.log(1)
        }
        function fun2() {
            console.log(2)
            fun1()
            console.log(3)
        }
        fun2()
        //2 1 3

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

function func1() {
            console.log(1)
        }
        function func2() {
            setTimeout(() => {
                console.log(2)
            }, 0)
            func1()
            console.log(3)
        }
        func2()
        //1 3 2

promise async await的异步操作的时候会加入到微任务中去会在调用栈清空的时候立即执行。
调用栈中加入的微任务会立马执行。

var p = new Promise(resolve => {
            console.log(4)
            resolve(5)
        })
        function func1() {
            console.log(1)
        }
        function func2() {
            setTimeout(() => {
                console.log(2)
            }, 0)
            func1()
            console.log(3)
            p.then(resolve => {
                console.log(resolve)
            })
        }
        func2()
        //4 1 3 5 2