当前位置：首页 > news >正文

分析实例，学习了解浏览器事件循环机制

news 来源：原创 2025/6/14 6:43:21

实例

 (() => {console.log(1);setTimeout(() => {console.log(2);}, 0);new Promise((resolve, reject) => {resolve()console.log(3);}).then(() => {console.log(4);});console.log(5);})();

执行上述箭头函数得到的答案： 1 3 5 4 2

分析学习：

代码运行是从上到下执行的；首先输出1
浏览器的执行机制，promise的机制会早于setTimeout,即使setTimeout的延迟是0s;而 resolve()， console.log(3);是同步调用；那么第2个输出就是3；
promise的知识点，当有resolve()才会继续调then函数的事物，那么已知4要3晚。

---------》那么当前的排序应该是 1 3 4 2

new Promise((resolve, reject) => {
resolve()
console.log(3);
})是和 console.log(5);是同一级别；意思是先指向Promise的同步部分，就会马上执行输出5

最终答案： 1 3 5 4 2

官方解释

浏览器事件循环机制

同步代码 → 直接执行。
微任务（MicroTask）：
Promise.then / MutationObserver / queueMicrotask
在当前调用栈清空后立即执行。
宏任务（MacroTask）：
setTimeout / setInterval / I/O / UI Rendering
必须等待微任务队列清空后才会执行。
这样设计是为了保证高优先级的任务（如 Promise）能更快执行，而低优先级的任务（如 setTimeout）稍后执行。