搞懂js中 eventloop事件循环和Promise面试题

最新推荐文章于 2024-07-21 14:38:16 发布
最新推荐文章于 2024-07-21 14:38:16 发布
阅读量383 收藏 3
点赞数 1
分类专栏： JavaScript 文章标签： javascript promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webjhh/article/details/116759051
版权

js事件循环中的异步队列有两种：macro（宏任务）队列和 micro（微任务）队列。

常见的 macro-task 比如： setTimeout、setInterval、 setImmediate、script（整体代码）、 I/O 操作、UI 渲染等。

常见的 micro-task 比如: process.nextTick、Promise、MutationObserver 等。

循环过程

我们先看一个完整的 Event Loop 过程。

  1. 初始状态：micro 队列空，macro 队列里有且只有一个 script 脚本（整体代码为宏任务）；
  2. 执行script代码，创建的宏任务推到宏任务调用栈中，创建的微任务推到微任务调用栈中；【宏任务阶段】
  3. 执行微任务，调出当前微任务栈的所有微任务，一次执行，其中如果有宏任务推到宏任务栈中【微任务阶段】
  4. 执行宏任务，调出当前宏任务栈中的第一个宏任务，其中创建的微任务推到微任务栈中【宏任务阶段】
  5. 如果代码未结束，循环执行3,4步骤

从上我们可以总结两个规律

  1. 宏任务和微任务阶段是轮番交替进行的
  2. 每个宏任务阶段只执行当前宏任务栈中的第一个任务，执行完就切换到微任务阶段，而微任务阶段却是要执行当前微任务栈的所有微任务，微任务阶段才结束

如果不理解两个规律那么我们就来试着做一道promise的面试题来加深一下

console.log('sync');

setTimeout(function () {
   console.log('setTimeout')
}, 0);

var promise = new Promise(function (resolve, reject) {
   console.log('promise');
   setTimeout(function() {
      promise.then(function(){
        console.log('promise-setTimeout-then')    
      })
      console.log('promise-setTimeout')
   }, 0);
   resolve();
});

promise.then(function() {
    setTimeout(function() { 
            promise.then(function(){
                console.log('then-setTimeout-then')    
            })
            console.log('then-setTimeout')
    }, 0);
    console.log('then');
    promise.then(function(){
        console.log('then-than')    
    })
})

我们先分析一下这段代码中有几个宏任务微任务阶段，我们假装自己是电脑执行一下代码

首先页面加载后同步代码会被推到宏任务中，故第一步是执行script的【宏任务阶段】，我们将宏任务和微任务将分别用两个数组来表示

//宏任务 
macro = ["script同步代码"]
//微任务 
micro = []

script代码开始执行

注：//注释部分表示不在当前阶段执行的代码

阶段1【宏任务阶段】

执行第一个宏任务 script同步代码，执行后删除当前宏任务

console.log('sync');
/**监测到settimeout，创建宏任务，并push到宏任务栈中 宏任务+1  macro = ['setTimeout'] **/
//setTimeout(function () {
//    console.log('setTimeout')
//}, 0);

var promise = new Promise(function (resolve, reject) {
   console.log('promise');
   /** 宏任务+1  macro = ['setTimeout','promise-setTimeout'] **/
   setTimeout(function() {
    //   promise.then(function(){
        // console.log('promise-setTimeout-then')    
    //   })
    //   console.log('promise-setTimeout')
   }, 0);
   resolve();
});
/**监测到then，创建宏任务，并push到微任务栈中  微任务+1  micro = ['then']**/
promise.then(function() {
    // setTimeout(function() { 
    //         promise.then(function(){
    //             console.log('then-setTimeout-then')    
    //         })
    //         console.log('then-setTimeout')
    // }, 0);
    // console.log('then');
    // promise.then(function(){
    //     console.log('then-than')    
    // })
})

当同步代码执行后我们任务栈的结果为

//宏任务 
macro = ['setTimeout','promise-setTimeout']
//微任务 
micro = ["then"]

此时同步代码执行可以直接得到一下输出

sync
promise

此时【宏任务阶段】执行完毕,根据上面的规则我们知道，【宏任务阶段】过后就要进入【微任务阶段】了，我们继续往下分析

阶段2【微任务阶段】

// console.log('sync');

// setTimeout(function () {
//    console.log('setTimeout')
// }, 0);

// var promise = new Promise(function (resolve, reject) {
//    console.log('promise');
//    setTimeout(function() {
//       promise.then(function(){
//         console.log('promise-setTimeout-then')    
//       })
//       console.log('promise-setTimeout')
//    }, 0);
//    resolve();
// });

promise.then(function() {
    /** 宏任务+1  macro = ['setTimeout','promise-setTimeout','then-setTimeout'] **/
     setTimeout(function() { 
    //         promise.then(function(){
    //             console.log('then-setTimeout-then')    
    //         })
    //         console.log('then-setTimeout')
     }, 0);
    console.log('then');
    /** 微任务+1  micro = ['then','then-than'] **/
     promise.then(function(){
         console.log('then-than')    
     })
})

根据上面的规则2我们知道，微任务阶段会把微任务栈的任务全部执行，所以此阶段新增的 then-then 也会被执行，最终微任务和宏任务栈里面的结果为

//宏任务 
macro = ['setTimeout','promise-setTimeout','then-setTimeout']
//微任务 
micro = []

所以这个阶段会输出以下结果

then
then-than

根据上面的规则我们知道，【微任务阶段】结束了，又该开始【宏任务阶段】了,我们要注意宏任务阶段只执行任务栈内的第一个宏任务 就是 setTimeout

阶段3【宏任务阶段】

执行宏任务中的第一个任务 setTimeout

// console.log('sync');

setTimeout(function () {
   console.log('setTimeout')
}, 0);

// var promise = new Promise(function (resolve, reject) {
//    console.log('promise');
//    setTimeout(function() {
//       promise.then(function(){
//         console.log('promise-setTimeout-then')    
//       })
//       console.log('promise-setTimeout')
//    }, 0);
//    resolve();
// });

// promise.then(function() {
//     setTimeout(function() { 
//             promise.then(function(){
//                 console.log('then-setTimeout-then')    
//             })
//             console.log('then-setTimeout')
//     }, 0);
//     console.log('then');
//     promise.then(function(){
//         console.log('then-than')    
//     })
// })

第三阶段没有新增任务，执行结果

//宏任务 
macro = ['promise-setTimeout','then-setTimeout']
//微任务 
micro = []

输出

setTimeout

再次执行 微任务

阶段4【微任务阶段】

此时发现微任务栈为空，并没有什么操作，跳过执行第五阶段

阶段5【宏任务阶段】

执行宏任务中第一个任务 promise-setTimeout

// console.log('sync');

// setTimeout(function () {
//    console.log('setTimeout')
// }, 0);

// var promise = new Promise(function (resolve, reject) {
//    console.log('promise');
   setTimeout(function() {
       /** 微任务+1  micro = ['promise-setTimeout-then'] **/
      promise.then(function(){
       // console.log('promise-setTimeout-then')    
      })
      console.log('promise-setTimeout')
   }, 0);
//    resolve();
// });

// promise.then(function() {
//     setTimeout(function() { 
//             promise.then(function(){
//                 console.log('then-setTimeout-then')    
//             })
//             console.log('then-setTimeout')
//     }, 0);
//     console.log('then');
//     promise.then(function(){
//         console.log('then-than')    
//     })
// })

我们看到当前阶段宏任务中又增加了微任务，故执行结果

//宏任务 
macro = ["then-setTimeout"]
//微任务 
micro = ["promise-setTimeout-then"]

输出

promise-setTimeout

继续执行

阶段6【微任务阶段】

执行微任务栈中所有微任务

// console.log('sync');

// setTimeout(function () {
//    console.log('setTimeout')
// }, 0);

// var promise = new Promise(function (resolve, reject) {
//    console.log('promise');
//    setTimeout(function() {
       promise.then(function(){
         console.log('promise-setTimeout-then')    
       })
//       console.log('promise-setTimeout')
//    }, 0);
//    resolve();
// });

// promise.then(function() {
    // setTimeout(function() { 
    //        promise.then(function(){
    //            console.log('then-setTimeout-then')    
    //        })
            // console.log('then-setTimeout')
    // }, 0);
//     console.log('then');
//     promise.then(function(){
//         console.log('then-than')    
//     })
// })

执行结果

//宏任务 
macro = ["then-setTimeout"]
//微任务 
micro = []

输出

promise-setTimeout-then

阶段7【宏任务阶段】

之后阶段，执行最后一个宏任务

// console.log('sync');

// setTimeout(function () {
//    console.log('setTimeout')
// }, 0);

// var promise = new Promise(function (resolve, reject) {
//    console.log('promise');
//    setTimeout(function() {
//       promise.then(function(){
//         console.log('promise-setTimeout-then')    
//       })
//       console.log('promise-setTimeout')
//    }, 0);
//    resolve();
// });

// promise.then(function() {
    setTimeout(function() { 
            /** 微任务+1  micro = ['then-setTimeout-then'] **/
            promise.then(function(){
               // console.log('then-setTimeout-then')    
            })
            console.log('then-setTimeout')
    }, 0);
//     console.log('then');
//     promise.then(function(){
//         console.log('then-than')    
//     })
// })

任务栈

//宏任务 
macro = []
//微任务 
micro = ["then-setTimeout-then"]

输出

then-setTimeout

 

阶段8【微任务阶段】

执行最后一个微任务then-setTimeout-then ,代码省略

输出

then-setTimeout-then

任务栈清空，运行结束

最终版输出结果

//宏任务阶段
sync  
promise
//微任务阶段
then
then - than
//宏任务阶段
setTimeout
//微任务阶段（没有任务，没有输出）
//宏任务阶段
promise - setTimeout
//微任务阶段
promise - setTimeout - then
//宏任务阶段
then - setTimeout
//微任务阶段
then-setTimeout-then

从结果中我们也可以证实上面两个规则。不论多复杂的题目，只要按照这两个规则解析，就可以化繁为简，从容应对

 

格竹悟道
关注
专栏目录
js代码-浏览器的event loop面试题
07-16
js代码-浏览器的event loop面试题
promise和Event Loop事件循环面试题
furfur-jiang的博客
10-04 747
版本一：得心应手版 考点：eventloop中的执行顺序，宏任务微任务的区别。 setTimeout(()=>{ console.log(1) },0) Promise.resolve().then(()=>{ console.log(2) }) console.log(3) //3 2 1 了解宏任务(marcotask)微任务(microtask) 这个是属于Eventloop的问题。main script运行结束后，会有微任务队列和宏任务队列。微任务先执行，之后是宏任务。
面试必问之 JS 事件循环（Event Loop），看这一篇足够！！！
最新发布
2401_83384536的博客
07-21 1451
本文详细讲解了浏览器和 NodeJS 中事件循环的流程，虽然底层机制不一样，但在最终表现上是基本一致的。理解事件循环的原理，可以帮助我们准确分析和运用各种异步形式，减少代码的不确定性，在一些执行效率优化上也能有明确的思路。在前端面试中，事件循环相关的内容也是高频出现的技术点，理解它也有助于提升面试通过率，增加面试信心。resolve();})}, 0);resolve();})async1();
有趣且重要的JS知识合集（5）JS事件循环机制和Promise
qq_39404437的博客
01-05 748
JS事件循环机制和Promise
一道关于EventLoop事件循环事件队列的JS题
weixin_44735018的博客
05-31 179
一道关于EventLoop事件循环事件队列的JS题 上代码 async function async1(){ console.log("async1 start"); await async2(); console.log('async1 end'); } async function async2(){ console.log('async2') }; console.log('script start'); setTimeout(function(){
js面试——eventLoop
张小杰
06-16 840
什么是eventLoop？ event loop指的是一种运行机制，规定了JS引擎是如何运行代码的。 为什么会有eventLoop？ 由于JS是单线程执行的，所以任务(代码)的执行需要进行排队。任务分为两种：同步和异步，针对异步任务，首先会被推到任务队列中，然后根据event loop机制进行执行 JS运行机制 以上为事件循环示例图： step1:主线程读取JS代码，此时为同步环境，形成相应的堆和执行栈； step2:主线程遇到异步任务，指给对应的异步进程进行处理（WEB ...
前端面试题之EventLoop(事件循环)
qq_57162416的博客
12-22 785
首先js代码分为同步和异步,浏览器会率先执行同步代码,将异步代码放入任务队列中稍后执行,而异步代码又分为宏任务和微任务,在同步代码全部执行完成后会先执行异步微任务再执行异步宏任务(如下)根据规则可知这道代码题在控制台打印的答案为1 7 8 9 10 2 3 4 6 5。4.如果是异步代码,不会立即执行.微任务就放入微任务队列,宏任务就会放入宏任务队列。6.先执行异步队列中的微任务,再来执行宏任务,完成本次事件循环。3.如果是同步代码,立即执行。p站画师リトル・ファンタジー。2.判断代码是同步还是异步。
前端面试系列-JavaScript中的Event Loop(事件循环)机制(含图解)
LYFlied的博客
03-21 2424
前端面试系列-JavaScript中的Event Loop(事件循环)机制， javascript是一门单线程的非阻塞的脚本语言。 浏览器环境下js引擎的事件循环机制 执行栈与事件队列 执行上下文 执行栈 栈溢出 事件队列（Task Queue） 事件循环（Event Loop） 微任务（micro task）和宏任务（macro task） node环境下的事件循环机制 1.与浏览器环境的差异 2.事件循环模型 3.事件循环各阶段详解
深入理解 JavaScript 之事件循环(Event Loop)，总结2024年180道前端岗面试题
favip8的博客
03-31 1293
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）[外链图片转存中…(img-8Brqlwsu-1711868798064)]正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！
js|setTimeOut,Promise面试题集合，详解js事件机制EventLoop
敲敲的博客
03-16 1977
文章目录1.利用setTimeOut，每隔1s循环打印叠加的i**先说为什么是间隔1s后同时输出：**实现间隔1s打印一次为什么是5个5？怎么样打印出0～4？方法一：利用立即执行函数方法二2.使用setTimeout模拟SetInterval效果SetInterval的累计效应3.this指向4.在setTimeout中传入函数 1.利用setTimeOut，每隔1s循环打印叠加的i 一个经典的题...
面试率 90% 的JS事件循环Event Loop，看这篇就够了！! !
热门推荐
道阻且长，行则将至。
08-28 1万+
面试率 90% 的JS事件循环Event Loop，看这篇就够了！! ! 事件循环（Event Loop）大家应该并不陌生，它是前端极其重要的基础知识。在平时的讨论或者面试中也是一个非常高频的话题。 理解 JavaScript 的事件循环往往伴随着宏任务和微任务、JavaScript 单线程执行过程及浏览器异步机制等相关问题，而浏览器和 NodeJS 中的事件循环实现也是有很大差别。熟悉事件循环，了解浏览器运行机制将对我们理解 JavaScript 的执行过程和排查运行问题有很大帮助。 一、浏览器 JS
JavaScript--EventLoop + Promise + Async/Await
阿波罗吹雪的博客
03-28 297
刚学了JavaScript的EventLoop，并且混上Promise和Async/Await，在此作下总结 总共可分三种队列，第一是宏任务队列，第二是微任务队列，第三是专为process.nextTick创建的队列 三个队列的执行顺序是 宏-->nextTick-->微，之后不断循环 普通的语句（如console），函数和new的Promise中的语句，await修饰的语句放到宏...
Eventloop不可怕，可怕的是遇上Promise
weixin_34005042的博客
03-27 334
有关Eventloop+Promise的面试题大约分以下几个版本——得心应手版、游刃有余版、炉火纯青版、登峰造极版和究极变态版。假设小伙伴们战到最后一题，以后遇到此类问题，都是所向披靡。当然如果面试官们还能想出更变态的版本，算我输。 版本一：得心应手版 考点：eventloop中的执行顺序，宏任务微任务的区别。 吐槽：这个不懂，没得救了，回家重新学习吧。 setTimeout(()=&gt...
怎么理解JavaScript的单线程，异步，Event Loop，Promise的关系
weixin_38382659的博客
05-02 702
理清JavaScript的异步和单线程，Event Loop的关系JS的单线程为什么JS是单线程的JS的异步：单线程的解决方案为什么要使用异步异步的实现机制---Event Loop事件轮询JS的promise：异步的解决方案 JavaScript的三座大山：单线程与异步，原型与原型链（继承），作用域和闭包。 接下来就其中的单线程与异步，和延扩涉及的事件轮询，谈谈我自己的理解，也算是做下总结，顺便...
前端面试大全：Event Loop
itKingOne的博客
01-16 4267
(内容同步自小邹的头条号：沪漂程序员的生活史) 在前两篇文章中小邹介绍了 JS 异步相关的知识。在实践的过程中，你是否遇到过以下场景，为什么 setTimeout 会比 Promise 后执行，明明代码写在 Promise 之前。这其实涉及到了 Event Loop 相关的知识，这一篇文章我们会来详细地了解 Event Loop 相关知识，这也是面试经常会问的一个问题。   进程与线程 ...
【JavaScript】异步（eventloop、Promise、async/await）
03-13 383
文章目录异步1 event loop（事件循环/事件轮询）1.1 JS 如何执行1.2 event loop 过程1.3 异步基于 `event loop`2 promise 进阶2.1 then 和 catch 改变状态3 async/await3.1 背景3.2 async/await 和 Promise 的关系3.3 异步的本质4 微任务/宏任务4.1 event loop 和 DOM 渲染4.2 微任务和宏任务的根本区别 异步 1 event loop（事件循环/事件轮询） JS 是单线程
总结promise与事件循环的几个面试题
weixin_48357279的博客
05-01 565
🌲五🌲一🌳劳🌳动🌳节🌴快🌴乐🌴 废话不多说，直接开怼 1.先拿个简单的练练手 请说出他们的打印结果 function do1() { console.log("任务1"); console.log(abc); //故意犯错 } function do2() { console.log("任务2"); } function do3() { console.log("任务3"); } function do4() { console.log("任务4"); } var
JS异步 & event loop 事件循环机制 & 宏任务和微任务
weixin_41246825的博客
03-24 221
一：单线程和异步 JS是单线程语言，只能同时做一件事 浏览器和nodejs已支持JS启动进程，如Web Worker JS和Dom渲染共用一个线程 进程（process）:系统中正在运行的一个应用程序；程序一旦运行就成为了一个进程 线程（thread）：线程时进程的最小执行单位，一个进程中可以只有一个线程，这称为单线程，也可以存在多个线程并行执行不同的任务，这称为多线程 基于JS是单线程语言，但是同步会阻塞代码执行，异步不会阻塞代码执行(是以回调callback函数形式)，故在JS的应用中引入了异
ES6模块化、Promise解决回调地狱、EventLoop、webpack打包工具
hjc13348的博客
06-01 235
ES6模块化ES6模块化默认导入与默认导出按需导入与按需导出直接导入并执行模块PromisePromiset.then使用Promise.then 和 Promise.catch链式调用Promise.all()方法Promise.race()方法自定义封装一个thenFs.readFile函数async和awaitEventLoop执行过程经典面试题宏任务和微任务宏任务和微任务执行顺序经典面试题1经典面试题2 ES6模块化 //Node.js 要求 ES6 模块采用.mjs后缀文件名。也就是说，只要脚本文
深入理解Vue面试难题：变量提升、this、Promise与事件循环
"Vue面试题第二部分整理，涵盖了JavaScript的基础与进阶知识，包括变量提升、bind、call、apply的区别及实现，原型链、对象类型判断、箭头函数、this用法、async、await、generator、Promise、数据比较、存储机制、...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值