JavaScript的Event Loop：彻底搞懂异步和同步本篇博客透彻地探讨了前端高频面试知识点，为你的面试提供了全

啊，JavaScript的Event Loop，这个让无数开发者夜不能寐的话题。如果你还在为异步和同步搞不清楚而头疼，那么恭喜你，今天我们就要一起深入这个兔子洞，看看里面到底藏着什么秘密。系好安全带，我们要开始这趟脑力激荡之旅了！

同步vs异步：一个老掉牙但必须理解的概念

在我们深入Event Loop之前，让我们先回顾一下同步和异步的概念。别翻白眼，我知道你可能已经听过无数遍了，但相信我，这是理解Event Loop的基础，就像你必须先学会走路才能跑步一样。

同步：排队等候的乖宝宝

同步操作就像是一群有序排队的小朋友。每个操作都乖乖等待前面的操作完成后才会执行。这很好理解，对吧？就像你必须等前面的人买完票才能轮到你一样。

console.log('First');
console.log('Second');
console.log('Third');

输出结果毫无悬念：

First
Second
Third

异步：调皮捣蛋的捣乱分子

而异步操作就像是那个不守规矩的熊孩子，总是想插队。它们不会乖乖等待，而是会说："嘿，我先去玩一会儿，等我玩好了再回来"。

console.log('Start');
setTimeout(() => {
    console.log('Timeout');
}, 0);
console.log('End');

输出结果可能会让你吃惊：

Start
End
Timeout

即使我们设置了0毫秒的延迟，Timeout还是最后才输出。这就是异步的魔力，也是让很多人困惑的地方。

Event Loop：JavaScript的交通指挥官

现在，让我们正式迎接今天的主角：Event Loop。如果把JavaScript运行环境比作一个繁忙的城市，那么Event Loop就是这个城市的交通指挥官，它决定了哪些任务可以通行，哪些任务需要等待。

Event Loop的工作原理

调用栈（Call Stack）：这是同步任务的领地。所有的同步代码都会在这里执行。
任务队列（Task Queue）：这里是异步任务报到的地方。异步操作完成后，相关的回调函数会被放入这个队列。
微任务队列（Microtask Queue）：这是一个比任务队列优先级更高的队列，用于存放一些需要尽快执行的异步任务，比如Promise的回调。

Event Loop的工作就是不断地检查调用栈是否为空。如果为空，它会先检查微任务队列，将里面的任务依次加入调用栈执行。当微任务队列清空后，才会去检查任务队列，将其中的任务加入调用栈执行。

让我们用一个例子来说明这个过程：

console.log('Script start');

setTimeout(() => {
    console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise 1');
}).then(() => {
    console.log('Promise 2');
});

console.log('Script end');

猜猜看输出顺序是什么？

Script start
Script end
Promise 1
Promise 2
setTimeout

是不是和你想的不太一样？让我们来解释一下：

console.log('Script start') 和 console.log('Script end') 是同步代码，直接在调用栈中执行。
setTimeout 的回调被放入任务队列。
Promise的两个 .then 回调被放入微任务队列。
同步代码执行完毕后，Event Loop先检查微任务队列，执行两个Promise的回调。
最后，才轮到 setTimeout 的回调执行。

实战案例：当Event Loop遇上Ajax

理论讲完了，让我们来点实际的。假设我们要从服务器获取一些数据，然后处理这些数据。我们会使用fetchAPI来模拟这个过程：

console.log('开始获取数据');

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log('数据处理完成');
        return processData(data);
    })
    .then(result => {
        console.log('结果：', result);
    })
    .catch(error => {
        console.error('出错了：', error);
    });

console.log('请求已发送');

function processData(data) {
    // 假设这是一个耗时的同步操作
    console.log('正在处理数据...');
    // 模拟耗时操作
    let result = 0;
    for(let i = 0; i < 1000000000; i++) {
        result += i;
    }
    return result;
}

这段代码的执行顺序是怎样的呢？

console.log('开始获取数据') 执行。
fetch 被调用，这是一个异步操作，它的后续操作被放入微任务队列。
console.log('请求已发送') 执行。
调用栈清空，Event Loop检查微任务队列，发现没有可执行的微任务。
一段时间后，fetch 完成，它的第一个 .then 回调被放入微任务队列。
Event Loop检测到微任务，将其加入调用栈执行。数据被解析为JSON。
第二个 .then 回调被放入微任务队列，然后执行。console.log('数据处理完成') 被输出。
processData 函数开始执行。这是一个耗时的同步操作，会阻塞后续代码的执行。
processData 完成后，最后一个 .then 回调执行，输出结果。

总结：Event Loop不是魔法，而是一门艺术

理解Event Loop就像学习一门新的语言。一开始可能会感到困惑，但随着你的深入，你会发现它的优雅和力量。它让JavaScript能够处理复杂的异步操作，同时保持单线程的简单性。

记住，JavaScript的世界里：

同步任务是循规蹈矩的好学生，按部就班地在调用栈中执行。
异步任务是调皮的捣蛋鬼，被扔进任务队列或微任务队列，等待被Event Loop召唤。
Event Loop是公正无私的裁判，确保每个任务都有机会上场表演。

下次当你写异步代码时，不妨想象一下Event Loop在幕后辛勤工作的样子。它可能不会给你鼓掌，但它一定会确保你的代码按照正确的顺序演出这场异步的交响乐。

最后，如果你还是觉得Event Loop很难理解，别灰心。罗马不是一天建成的，理解Event Loop也不是一蹴而就的。慢慢来，总有一天你会恍然大悟，原来这就是Event Loop！

海码面试小程序

包含最新面试经验分享，面试真题解析，全栈2000+题目库，前后端面试技术手册详解；无论您是校招还是社招面试还是想提升编程能力，都能从容面对~

JavaScript的Event Loop：彻底搞懂异步和同步