事件循环机制及常见面试题

借鉴:

《Javascript 忍者秘籍》第二版,事件循环篇

面试 | JS 事件循环 event loop 经典面试题含答案 - 知乎 (zhihu.com)

概念

  1. 主栈队列就是一个宏任务,每一个宏任务执行完就会执行宏任务中的微任务,直到微任务全部都执行完,才开始执行下一个宏任务。
  2. JS 中任务的执行顺序优先级是:主栈全局任务(宏任务) > 宏任务中的微任务 > 下一个宏任务。 ,所以 promise(微任务).then() 的执行顺序优先级高于setTimeout定时器。
  3. 不能满目的将 .then 的回调放入微任务队列;因为没有调用 resolve或者reject 之前是不算异步任务完成的, 所以不能将回调随意的放入微任务事件队列
  4. await 是一个让出线程的标志。await 后面的表达式会先执行一遍,将 await 后面的代码加入到 micro task中这个微任务是 promise 队列中微任务,然后就会跳出整个 async 函数来继续执行后面的代码。
  5. process.nextTick 是一个独立于 eventLoop 的任务队列,主栈中的宏任务每一次结束后都是先执行 process.nextTick队列,在执行微任务 promise 的 .then()。
  6. 每一个宏任务和宏任务的微任务执行完后都会对页面 UI 进行渲染
  • 宏任务 macrotask
    • script 整体代码
    • setTimeout
    • setInterval
    • setImmediate
    • I/O
    • ui render
  • 微任务 microtask
    • process.nextTick
    • promise.then
    • await 后面的代码
    • MutationObserver(h5新特性)

为什么 await 后面的代码会进入到promise队列中的微任务?

async/await 只是操作 promise 的语法糖,最后的本质还是promise

复制代码
async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
// 上面的代码等价于 ==>
async function async1() {
    console.log('async1 start');
    Promise.resolve(async2()).then(() => {
        console.log('async1 end')
    })
}

面试题

面试题1

javascript 复制代码
async function async1() {
    console.log('1') // 2
    async2().then(() => {
        console.log('2')
    })
}
async function async2() {
    console.log('3') // 3
}
console.log('4') // 1
setTimeout(function () {
    console.log('5')
}, 0)
async1();
new Promise(function (resolve) {
    console.log('6') // 4
    resolve();
}).then(function () {
    console.log('7')
})
console.log('8') // 5
//4 1 3 6 8 2 7 5

面试题2

javascript 复制代码
setTimeout(() => {
 
    console.log(1);
 
}, 0);
 
async function main1() {
 
    new Promise((resolve, reject) => {
 
        console.log(2);
 
        resolve();
 
    }).then(() => {
 
        console.log(3);
 
    })
 
    await main2();
 
    console.log(7);
 
}
 
function main2() {
 
    console.log(8);
 
}
 
main1();
 
setTimeout(() => {
 
    console.log(10);
 
}, 0);
 
 
 
//  
2
8
3
7
1
10

面试题3

javascript 复制代码
Promise.resolve()
    .then(() => {
        console.log(0);
        return Promise.resolve('4x');
    })
    .then((res) => { console.log(res) })
Promise.resolve().then(() => { console.log(1); })
    .then(() => { console.log(2); }, () => { console.log(2.1) })
    .then(() => { console.log(3); })
    .then(() => { console.log(5); })
    .then(() => { console.log(6); })

    // 0 1 2 3 4x 5 6

面试题4 详解:(1 封私信) 关于promise输出顺序的疑问? - 知乎 (zhihu.com)

javascript 复制代码
new Promise((resolve,reject) => {
    console.log('外部promise')
    resolve()
})
.then(() => {
    console.log('外部第一个then')
    new Promise((resolve,reject) => {
        console.log('内部promise')
        resolve()
    })
    .then(() => {
        console.log('内部第一个then')
        return Promise.resolve()
    })
    .then(() => {
        console.log('内部第二个then')
    })
})
.then(() => {
    console.log('外部第二个then')
})
.then(() => {
    console.log('外部第三个then')
})
.then(() => {
    console.log('外部第四个then')
})	

// 
外部promise
 外部第一个then
 内部promise
内部第一个then
外部第二个then
外部第三个then
 外部第四个then
 内部第二个then

面试题5

javascript 复制代码
// A 任务
setTimeout(() => {
    console.log(1)
}, 20)

// B 任务
setTimeout(() => {
    console.log(2)
}, 0)

// C 任务
setTimeout(() => {
    console.log(3)
}, 10)

// D
setTimeout(() => {
    console.log(5)
}, 10)

console.log(4)
/* 输出
*   4 -> 2-> 3 -> 5 -> 1
*/

面试题6

javascript 复制代码
setTimeout(function () {
    console.log(1)
}, 0);

new Promise(function (resolve, reject) {
    console.log(2)
    for (var i = 0; i < 10000; i++) {
        if (i === 10) {
            console.log(10)
        }
        i == 9999 && resolve();
    }
    console.log(3)
}).then(function () {
    console.log(4)
})
console.log(5);
// 2, 10, 3, 5, 4, 1

面试题7

javascript 复制代码
console.log("start");
setTimeout(() => {
    console.log("children2")
    Promise.resolve().then(() =>{
        console.log("children3")
    })
}, 0)

new Promise(function(resolve, reject){
    console.log("children4")
    setTimeout(function(){
        console.log("children5")
        resolve("children6")
    }, 0)
}).then(res =>{         // flag
    console.log("children7")
    setTimeout(() =>{
        console.log(res)
    }, 0)
})
// start children4 children2 children3  children5  children7 children6

面试题8

这道题的难点在于是 promise2还是 async1 end 先输出。从全局宏任务之上而下执行时 await async2() 后面的代码 console.log('async1 end') 先进入 promise 中的微任务队列,最后.then() 中的console.log('promise2') 再进入到 promise 中的微任务队列。所以再开始下一轮宏任务循环之前先输出了 async1 end 再输出了 promise2。全局中的微任务执行完成开始下一轮宏任务setTimeout 最后输出 setTimeout

javascript 复制代码
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 () {
    console.log('setTimeout')
}, 0)
async1()
new Promise((resolve) => {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('promise2')
})
console.log('script end')
//输出
//script start
//async1 start
//async2
//promise1
//script end
//async1 end
//promise2
//setTimeout

面试题9

首先开始全局下的宏任务依次输出 script start, async1 start, promise1, promise3, script end。其中 await async2();async2().then()的代码先进入到promise的微任务队列,await async2(); 后面的代码再进入到promise的任务队列,console.log('promise4'); 最后进入到 promise 的任务队列。全局下的宏任务结束,开始全局下的微任务,promise 的微任务队列中按照队列的先进先出原则依次输出,promise2,async1 end,promise4。全局微任务结束,开始下一轮的宏任务setTimeout,最终输出 setTimeout

javascript 复制代码
async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    new Promise(function (resolve) {
        console.log('promise1');
        resolve();
    }).then(function () {
        console.log('promise2');
    });
}
console.log('script start');
setTimeout(function () {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function (resolve) {
    console.log('promise3');
    resolve();
}).then(function () {
    console.log('promise4');
});
console.log('script end');
//script start, 
// async1 start, 
// promise1, 
// promise3, 
// script end, 
// promise2,
// async1 end,
// promise4, 
// setTimeout

面试题10

javascript 复制代码
async function async1() {
    console.log('async1 start');
    await async2();
    setTimeout(function() {
        console.log('setTimeout1')  // 这一部分代码会放入到 promise 的微任务队列中。
    },0)
}
async function async2() {
    setTimeout(function() {
        console.log('setTimeout2')
    },0)
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout3');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');
// script start, async1 start, promise1, script end,
// promise2, setTimeout3,  setTimeout2, setTimeout1
相关推荐
Eiceblue32 分钟前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762901 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊2 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术2 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing2 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python