Sync vs Async 在 JavaScript 中（最简易解释）

Source: Dev.to

介绍

在学习 JavaScript 时，你会遇到的最重要概念之一是 同步 与 异步 编程。理解这个主题可以帮助你编写更好的代码，构建更快、更流畅的网页应用。它解释了 JavaScript 如何处理任务——是等一个任务完成后才继续下一个，还是在任务后台运行时继续执行其他代码。

同步 JavaScript

同步 JavaScript 按顺序一次执行一行代码。每个任务必须完成后才能开始下一个。

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

输出

Step 1
Step 2
Step 3

下面的稍长示例展示了循环如何阻塞执行：

console.log("Start");

for (let i = 0; i < 5; i++) {
  console.log("Working...");
}

console.log("End");

输出

Start
Working...
Working...
Working...
Working...
Working...
End

因为 JavaScript 正在执行循环，循环结束前它无法做其他事情。这种阻塞会：

• 放慢应用速度
• 冻结用户界面
• 导致糟糕的用户体验

异步 JavaScript

异步 JavaScript 允许程序启动一个任务后继续执行其他代码，而不必等待该任务完成。运行时会在后台处理耗时的操作。

console.log("Start");

setTimeout(function () {
  console.log("Task completed");
}, 2000);

console.log("End");

立即输出

Start
End

2 秒后输出

Task completed

setTimeout 的回调被加入队列，稍后执行，而主线程继续向下运行。JavaScript 是单线程的，如果没有异步行为：

• 网页会卡死
• 用户交互会停止
• 应用会感觉慢

异步编程通过允许 API 调用、计时器和文件加载等任务在后台运行来解决这些问题。

类比

• 同步： 你在商店排队，等到拿到商品后才离开。
• 异步： 你在线点餐，继续工作，食物稍后送达。

对比

异步模式

处理异步操作的常见方式：

• 回调（Callbacks） – 传统的函数传递给异步 API。
• Promise – 表示最终完成或失败的对象。
• async/await – 对 Promise 的语法糖，使代码更清晰、看起来更线性。

这些模式通过防止主线程被阻塞来提升性能和用户体验。