[面试题]事件循环经典面试题解析

https://edu.csdn.net/course/detail/36074

https://edu.csdn.net/course/detail/35475

进程是计算机已经运行的程序,线程是操作系统能够进行运算调度的最小单位,它被包含在进程中.浏览器中每开一个Tab页,就会打开一个进程,而这个进程又包含了很多线程.大家都知道JS是一门单线程语言,如果遇到了非常耗时的操作,那么JS的执行就会受到阻塞,这肯定不是我们想看到的,所以这些耗时的操作,往往不是由JS线程所执行的,而是交由浏览器中的其他线程去完成的,成功之后只要在某个特定的时候进行一个回调函数即可所以引出了事件循环的概念,在事件循环中,分两种任务,分别是宏任务和微任务
宏任务包含 ajax、setTimeout、setInterval、DOM监听、UI Rendering微任务包含 Promise的then回调、 Mutation Observer API、queueMicrotask()等
接下来我们直接就开始练习面试题熟悉熟悉

复制代码

12345678910111213141516171819202122232425262728293031323334353637

javascript`setTimeout(function () {
console.log(“setTimeout1”);

new Promise(function (resolve) {
resolve();
}).then(function () {
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log(“then4”);
});
console.log(“then2”);
});
});

new Promise(function (resolve) {
console.log(“promise1”);
resolve();
}).then(function () {
console.log(“then1”);
});

setTimeout(function () {
console.log(“setTimeout2”);
});

console.log(2);

queueMicrotask(() => {
console.log(“queueMicrotask1”)
});

new Promise(function (resolve) {
resolve();
}).then(function () {
console.log(“then3”);
});`

先解决同步任务
输出promise1 2
开始解决异步任务中的微任务
输出then1 queueMicrotask1 then3
开始解决异步任务中的宏任务
输出setTimeout1,在第一个定时器中,又遇到了微任务,那么接着执行微任务
输出then2 然后输出 then4
目光跳出第一个定时器中,看到第二个定时器 开始输出setTimeout2
最后的完整输出为 promise1 2 then1 queueMicrotask1 then3 setTimeout1 then2 then4 setTimeout2

复制代码

1234567891011121314151617181920212223242526272829

javascript`async function async1() {
console.log(‘async1 start’)
// await异步函数的返回结果 resolve的结果会作为整个异步函数的promise的resolve结果->同步代码
// await后面的执行代码 就会变成.then后面的执行函数->微任务
// 也就是说 console.log(‘async1 end’) 这一段是相当于then方法内的 会被加入微任务中
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(function (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
完整输出:script start async1 start async2 promise1 script end async1 end promise2 setTimeout

复制代码

12345678910111213141516171819202122232425262728

javascript`Promise.resolve().then(() => {
console.log(0);
//1.直接返回4 微任务不会做任何延迟
// return 4
//2.直接返回Promise.resolve(4) 微任务推迟两次
// return Promise.resolve(4);
//3.返回thenable对象
return {
then: ((resolve, reject) => {
resolve(4);
})
}
}).then((res) => {
console.log(res)
})

Promise.resolve().then(() => {
console.log(1);
}).then(() => {
console.log(2);
}).then(() => {
console.log(3);
}).then(() => {
console.log(5);
}).then(() => {
console.log(6);
})`
这道面试题有些特殊,需要大家记住两个结论

如果返回的是thenable对象,那么微任务会推迟一次,thenable对象就是实现了Promise.then的那个函数,具体可看代码如果返回的是Promise.resolve(4),那么微任务会推迟两次,这个相当于是返回一个Promise之后又用了resolve,二者是等价的为了配合大家理解,我给大家画了几张图,大家可以看看

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aMWrhIg9-1646846037009)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/569c204f981e42c5a98d2014e4594856~tplv-k3u1fbpfcp-zoom-1.image “上述是then中返回的三种情况”)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-itzZizEq-1646846037013)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e5976aafab541deace1e7dfdfa55ae6~tplv-k3u1fbpfcp-zoom-1.image “普通返回,不会推迟”)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YB6D2Rjk-1646846037014)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d76aecd1449480ab33d9ffa352ff3e2~tplv-k3u1fbpfcp-zoom-1.image “返回thenable 推迟一次”)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TxUzboTl-1646846037015)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9446c84c4a4846deb833e0b2597642fd~tplv-k3u1fbpfcp-zoom-1.image “返回Promise.resolve,推迟两次”)]

本道题是基于node的事件循环,和浏览器的事件循环不一样,需要记住以下几点

node的事件循环也分宏任务和微任务

宏任务: setTimeout、setInterval、IO事件、setImmediate、close事件微任务: Promise的then回调、process.nextTick、queueMicrotask

node的每次事件循环都是按照以下顺序来执行的

next tick microtask queueother microtask queuetimer queuepoll queuepcheck queueclose queue

复制代码

12345678910111213141516171819202122232425262728293031323334353637

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(‘setTimeout0’)
}, 0)

setTimeout(function () {
console.log(‘setTimeout2’)
}, 300)

setImmediate(() => console.log(‘setImmediate’));

process.nextTick(() => console.log(‘nextTick1’));

async1();

process.nextTick(() => console.log(‘nextTick2’));

new Promise(function (resolve) {
console.log(‘promise1’)
resolve();
console.log(‘promise2’)
}).then(function () {
console.log(‘promise3’)
})

console.log(‘script end’)`

首先执行同步任务
输出script start async1 start async2 promise1 promise2 script end
接着执行微任务,因为node会优先执行nextTick这个微任务
所以先输出nextTick1 nextTick2在输出其他微任务,输出async1 end promise3
最后执行宏任务
输出 setTimeout0 setImmediate因为这个定时器延时3ms执行,所以会让其他的宏任务先执行完毕,才回去执行这个定时器,所以最后输出setTimeout2
最后的输出结果: script start async1 start async2 promise1 promise2 script end nextTick1 nextTick2 async1 end promise3 setTimeout0 setImmediate setTimeout2