JavaScript事件循环与执行队列：从原理到复杂示例解析

最新推荐文章于 2025-05-30 15:00:19 发布

云飞(-᷅_-᷄)

最新推荐文章于 2025-05-30 15:00:19 发布

阅读量474

点赞数 15

CC 4.0 BY-SA版权

文章标签： javascript es6

本文链接：https://blog.youkuaiyun.com/weixin_42597398/article/details/145632232

JavaScript事件循环与执行队列：从原理到复杂示例解析

一、什么是事件循环？

JavaScript是一门单线程语言，但通过事件循环（Event Loop）机制实现了异步非阻塞操作。事件循环的核心作用是协调调用栈（Call Stack）、消息队列（Message Queue）和微任务队列（Microtask Queue）的工作。

二、核心概念解析

1. 调用栈（Call Stack）

后进先出（LIFO）结构
用于存储同步代码的执行上下文

2. 任务队列（Task Queue）

宏任务队列（Macrotask Queue）：
- setTimeout/setInterval
- I/O操作
- UI渲染
- script整体代码
微任务队列（Microtask Queue）：
- Promise.then/catch/finally
- MutationObserver
- queueMicrotask

3. 事件循环运行流程

执行同步代码直至调用栈清空
执行所有微任务直至微任务队列清空
执行一个宏任务
重复步骤1-3

三、复杂示例演示

console.log('【1】同步代码开始');

setTimeout(() => {
    console.log('【11】setTimeout宏任务');
    new Promise(resolve => {
        console.log('【12】Promise构造函数（同步）');
        resolve();
    }).then(() => {
        console.log('【13】Promise微任务');
        queueMicrotask(() => console.log('【14】嵌套微任务'));
    });
}, 0);

Promise.resolve().then(() => {
    console.log('【2】第一个微任务');
    setTimeout(() => console.log('【3】微任务中触发的宏任务'), 0);
});

async function asyncFunc() {
    console.log('【4】async函数同步代码');
    await Promise.resolve();
    console.log('【5】await后微任务');
    setTimeout(() => console.log('【6】async中的宏任务'), 0);
}

asyncFunc();

new Promise(resolve => {
    console.log('【7】Promise构造函数（同步）');
    resolve();
}).then(() => {
    console.log('【8】链式微任务1');
}).then(() => {
    console.log('【9】链式微任务2');
});

console.log('【10】同步代码结束');

四、执行过程详细解析

执行顺序预测结果：

1 → 4 → 7 → 10 → 2 → 5 → 8 → 9 → 11 → 12 → 13 → 14 → 3 → 6

分步解析：

同步代码阶段
- 输出1、4、7、10（按代码顺序执行）
微任务队列处理
- 第一个Promise.then输出2
- async函数await后的代码输出5
- 链式Promise输出8和9
宏任务阶段
- 第一个setTimeout回调：
  - 输出11和12（同步代码）
  - Promise.then产生微任务13和14
  - 继续处理嵌套微任务
嵌套任务处理
- 输出13后触发新的微任务14
- 最后执行各宏任务中的setTimeout输出3和6