浅析Javascript中的Event Loop 事件循环机制

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

慕筱佳丶

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

阅读量155

点赞数

分类专栏： JavaScript 文章标签： javascript

幕筱佳丶

本文链接：https://blog.csdn.net/weixin_51138142/article/details/120027788

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

心语：地球是圆的，总有一天，我们会再次遇见想要遇见的人。

说到Event Loop 事件循环机制，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

我们都知道 javascript 是单线程的, Javascript 作为浏览器脚本语言，主要用途是与用户互动，以及操作DOM，这决定了它只能是单线程，否则会带来很复杂的同步问题。但单线程也存在者一个弊端，当有两个任务执行时后一个必须等到前面的执行完成后才能执行。

Javascript 将任务分为同步任务和异步任务。

同步任务：指的是在当前主线程(执行栈)中运行的任务，只有当前一个任务执行完成，下一个任务才会接着执行，不管前一个任务执行需要多久
异步任务：不进入主线程，存放在任务队列中，但主线程的任务清空后，进入到任务队列中的，取出某个任务到主线程中执行

而对于异步任务来说又分为宏任务和微任务。在这里，我说下我们常见的宏任务和微任务。

宏任务： setTimeout setInterval
微任务： Promise.then async/await

下面我用一幅图来简单描述下Event Loop
在这里插入图片描述
Javascript在执行代码时，会在主线程上产生一个执行栈，首先同步代码在当前执行栈中从上到下执行，如果遇到异步任务，会将宏任务（Tasks）和微任务(Microtasks)划分到各自队列中，当执行栈中的同步代码执行完成后，会先取出微任务中的任务到当前执行栈中执行，然后等微任务执行完成，直到微任务被清空之后，最后再执行宏任务，如此循环执行的过程，就形成了一个Event Loop。

如果还有不太理解的小伙伴，可以看看下面这些代码

  console.log(1)
        setTimeout(() => {
            console.log(2)   //setTimeout1
            new Promise((resolve, reject) => {
                console.log(3)
                resolve()
            }).then(() => {
                console.log(4)    //promise1
            }) 
        }, 0)
        new Promise((resolve, reject) => {
            console.log(5)
            resolve()
        }).then(() => {
            console.log(6)  //promise2
        })
        setTimeout(() => {
            console.log(7)  //setTimeout2
            new Promise((resolve, reject) => {
                console.log(8)
                resolve()
            }).then(() => {
                console.log(9)  //promise3
            })
        }, 0)
        console.log(10)
        const promise = new Promise((resolve, reject) => {
            console.log(1);
            console.log(2);
        });
        promise.then(() => {
            console.log(3);  //promise4
        });
        console.log(4);