同步 vs. 异步 JavaScript：真实案例解释

Source: Dev.to

Introduction

JavaScript 默认逐行（同步）执行代码，但它可以通过异步操作（例如 setTimeout、fetch、回调函数）来避免阻塞主线程。

在本指南中我们将讨论：

• 同步代码如何顺序运行
• 异步操作如何使用回调
• 一个真实场景的餐厅类比
• Web API、回调队列和事件循环的角色

Synchronous Execution

除非另有指示，JavaScript 会顺序执行代码。

console.log("Step 1: Enter the restaurant");
console.log("Step 2: Order a burger");
console.log("Step 3: Pay for the meal");

Output

Step 1: Enter the restaurant
Step 2: Order a burger
Step 3: Pay for the meal

每一行都会等前一行执行完毕后才继续。

Asynchronous Execution

某些任务（API 调用、定时器等）需要时间。与其等待，JavaScript 会把它们交给浏览器的 Web API 处理，然后继续执行其他代码。

console.log("Step 1: Order food");
setTimeout(() => console.log("Step 2: Food is ready!"), 3000);
console.log("Step 3: Drink a soda");

Output

Step 1: Order food
Step 3: Drink a soda

(3 秒后)

Step 2: Food is ready!

setTimeout 在后台运行，使脚本的其余部分能够继续执行。

How It Works

• Call Stack – 按行执行同步代码。
• Web APIs – 在主线程之外处理 setTimeout、fetch 等异步任务。
• Callback Queue – 保存已完成异步任务的回调函数。
• Event Loop – 当调用栈为空时，将回调从队列移入调用栈。

Real‑World Analogy (Restaurant)

1. 你点餐 – setTimeout 开始计时。
2. 厨房（Web APIs） 在后台烹饪。
3. 你喝汽水 – 其他代码在食物准备期间运行。
4. 食物准备好后，放在柜台上（Callback Queue）。
5. 服务员（Event Loop） 只有在你空闲时（调用栈为空）才把食物端给你。

Key Takeaways

• JavaScript 默认是同步的，但支持异步操作。
• 异步任务（fetch、setTimeout 等）通过 Web API 在后台运行。
• async/await 为编写不阻塞执行的异步代码提供了更简洁的语法。
• 事件循环在主线程空闲时协调异步回调的执行。

Conclusion

理解同步与异步 JavaScript 对于构建高效、非阻塞的应用至关重要。无论是获取数据、设置定时器还是处理用户输入，掌握异步编程都能确保流畅的性能。

🚀 现在你已经了解 JavaScript 如何处理异步操作——去构建更快的应用吧！