同步与异步的区别

问题

解释 JavaScript 中同步和异步的区别。

解答

同步执行

代码按顺序执行，前一行执行完才执行下一行。如果某行代码耗时较长，后续代码必须等待。

console.log('1');
console.log('2');
console.log('3');

// 输出顺序：1, 2, 3

同步阻塞示例：

console.log('开始');

// 模拟耗时操作（阻塞 3 秒）
const start = Date.now();
while (Date.now() - start < 3000) {}

console.log('结束'); // 3 秒后才执行

// 页面在这 3 秒内完全卡死

异步执行

代码不会阻塞后续执行，耗时操作完成后通过回调处理结果。

console.log('开始');

// 异步操作，不阻塞
setTimeout(() => {
  console.log('异步任务完成');
}, 3000);

console.log('结束');

// 输出顺序：开始, 结束, 异步任务完成

常见异步场景

// 1. 定时器
setTimeout(() => console.log('timeout'), 0);

// 2. 网络请求
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

// 3. 事件监听
button.addEventListener('click', () => {
  console.log('clicked');
});

// 4. Promise
new Promise(resolve => {
  resolve('done');
}).then(result => console.log(result));

// 5. async/await
async function getData() {
  const res = await fetch('/api/data');
  return res.json();
}

执行顺序示例

console.log('1'); // 同步

setTimeout(() => {
  console.log('2'); // 宏任务
}, 0);

Promise.resolve().then(() => {
  console.log('3'); // 微任务
});

console.log('4'); // 同步

// 输出顺序：1, 4, 3, 2
// 同步代码先执行，然后微任务，最后宏任务

关键点

• 同步：按顺序执行，会阻塞后续代码
• 异步：不阻塞，通过回调/Promise 处理结果
• 为什么需要异步：JavaScript 单线程，异步避免页面卡死
• 执行顺序：同步代码 → 微任务（Promise）→ 宏任务（setTimeout）
• 常见异步 API：setTimeout、fetch、Promise、事件监听