同步 vs 异步 JavaScript

Source: Dev.to

什么是同步代码？

同步代码 按 逐行、一步一步地运行。每个任务必须在下一个任务开始前完成。

示例

console.log("Step 1");
console.log("Step 2");
console.log("Step 3");

输出

Step 1
Step 2
Step 3

执行时间线

Step 1 → Step 2 → Step 3

优点

• 简单
• 可预测

缺点

• 可能阻塞执行

问题：阻塞代码

如果任务耗时，其他所有操作都会等待。

console.log("Start");

for (let i = 0; i  {
  console.log("Async Task Done");
}, 2000);

console.log("End");

输出

Start
End
Async Task Done

执行时间线

Start → End → (after 2 s) Async Task Done

为什么 JavaScript 需要异步行为

• 从 API 获取数据 🌐
• 加载文件 📁
• 等待用户输入 👤

如果 JavaScript 只能同步执行，界面会卡死，用户体验会很差。

生活中的类比

同步：
先泡茶 → 等待 → 上茶 → 再做饭。所有步骤都是顺序进行。

异步：
先把水烧开 ☕，在等待的同时做饭 🍳。多个任务能够高效处理。

常见的异步示例

1. 定时器

   setTimeout(() => {
     console.log("Runs later");
   }, 1000);

2. API 调用

   fetch("https://api.example.com/data")
     .then(res => res.json())
     .then(data => console.log(data));

3. 事件处理

   button.addEventListener("click", () => {
     console.log("Clicked!");
   });

异步工作原理（简化版）

JavaScript 使用：

• 调用栈（Call Stack）
• Web API
• 回调队列（Callback Queue）

异步流程

Call Stack → Web API → Callback Queue → Execution

阻塞 vs 非阻塞

关键要点

• JavaScript 是 单线程。
• 同步 = 步骤式执行（可能阻塞）。
• 异步 = 非阻塞执行，对真实世界的应用至关重要。

最后思考

理解同步与异步行为是掌握 JavaScript 的基础。它帮助你：

• 构建响应式应用
• 处理真实场景任务
• 使用回调、Promise 和 async/await

快速总结

• 同步 → 一次只执行一个任务
• 异步 → 高效处理多个任务，防止阻塞
• 广泛用于 API、定时器、事件等场景。