返回
巧解事件循环，面试官的刁钻提问轻松过
前端
2023-09-26 05:00:19
**** 事件循环：面试中的技术难题**
简介
在技术面试中，事件循环往往是一个令人头疼的考察点。其复杂性让不少求职者望而却步。但其实，只要掌握正确的思路和方法，应对事件循环的问题并不困难。
事件循环的运作机制
JavaScript 中存在一个消息队列（Message Queue）和一个事件循环（Event Loop）。消息队列中存放着需要执行的回调函数，事件循环会不断从消息队列中取出回调函数并执行。
案例解析
我们以一道经典的面试题为例：
setTimeout(() => {
console.log('setTimeout1');
Promise.resolve().then(() => {
console.log('Promise1');
});
}, 0);
new Promise((resolve) => {
console.log('Promise2');
resolve();
}).then(() => {
console.log('Promise3');
setTimeout(() => {
console.log('setTimeout2');
}, 0);
});
console.log('Main');
解答步骤
- 主线程首先执行 console.log('Main')，输出 "Main"。
- setTimeout(() => { ... }) 将回调函数加入消息队列。
- Promise.resolve().then(() => { ... }) 将回调函数加入微任务队列。
- 微任务队列优先于消息队列执行，因此 Promise1 先输出 "Promise1"。
- 执行 new Promise((resolve) => { ... })，输出 "Promise2"。
- Promise2 执行完毕，将其 then() 回调函数加入微任务队列。
- 微任务队列再次执行，输出 "Promise3"。
- setTimeout1 回调函数被取出并执行，输出 "setTimeout1"。
- setTimeout2 被加入消息队列，等待下次事件循环执行。
- 再次执行事件循环，输出 "setTimeout2"。
输出顺序
因此，最终的输出顺序为：
Main
Promise2
Promise1
Promise3
setTimeout1
setTimeout2
结论
通过对这道题目的解析，我们可以了解到事件循环的运作方式以及在面试中应对此类问题的技巧。只要掌握正确的思路，冷静分析，就能轻松应对事件循环的面试难题。
常见问题解答
-
什么是消息队列和微任务队列？
消息队列存储回调函数，事件循环从消息队列中取出回调函数执行。微任务队列存储 Promise 的 then() 回调函数，优先于消息队列执行。 -
如何判断回调函数执行的顺序？
先执行主线程代码，然后按照消息队列和微任务队列的顺序执行回调函数。微任务队列优先于消息队列。 -
为什么 setTimeout 回调函数在微任务队列执行后才执行？
setTimeout 回调函数被加入消息队列，而不是微任务队列。事件循环会优先执行微任务队列，然后再执行消息队列。 -
如何避免事件循环中的错误？
避免在事件循环回调函数中执行耗时的操作，这会阻塞事件循环。使用微任务或异步函数来执行耗时的任务。 -
事件循环对 JavaScript 应用程序有什么影响？
事件循环管理 JavaScript 应用程序的异步执行。它确保代码的响应性和流畅性。
