JavaScript是一门单线程语言，它在浏览器或Node环境中依靠事件循环机制来处理异步操作。理解这套机制，是写出正确异步逻辑的前提。异步编程并不是让代码真正并行执行，而是把某些任务推迟到合适的时间点再运行，从而避免阻塞主线程导致页面卡顿。
为什么需要异步与事件循环
如果所有操作都同步执行，像网络请求、文件读取这种耗时动作会直接卡住整个线程。事件循环让JavaScript在等待外部响应时，先去执行其他脚本，等结果就绪后再回头处理回调。
调用栈与任务队列
代码运行时会产生调用栈，同步任务依次入栈出栈。异步任务在完成后被放入任务队列，事件循环持续检查调用栈是否为空，为空则取出队列中的任务执行。
宏任务与微任务
任务队列分为宏任务与微任务两类。常见宏任务有setTimeout、setInterval、I/O；微任务包括Promise.then、MutationObserver等。每轮循环先执行一个宏任务，再清空所有微任务。
| 类型 | 示例 | 执行时机 |
|---|---|---|
| 宏任务 | setTimeout | 每轮事件循环取一个 |
| 微任务 | Promise.then | 宏任务后全部执行 |
代码示例看执行顺序
下面代码展示了同步、宏任务与微任务的真实输出顺序：
console.log('start');
setTimeout(function() {
console.log('timeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise');
});
console.log('end');
// 输出顺序:
// start
// end
// promise
// timeout
async与await的本质
async函数返回的仍是Promise，await会暂停当前函数执行，把后续代码作为微任务调度。它只是让异步写法更像同步，并不会阻塞线程。
async function demo() {
console.log('a');
await null;
console.log('b');
}
demo();
console.log('c');
// 输出: a c b
常见误区
- 认为setTimeout(fn, 0)会立刻执行，其实它至少等当前宏任务与微任务清空。
- 在循环里用await却期待并行，应使用Promise.all。
- 把<input>事件回调当成微任务，它属于宏任务中的I/O类。
掌握事件循环，就能预测任何异步代码片段的输出，不再靠猜。
小结
JavaScript异步编程建立在单线程加事件循环之上。分清宏任务与微任务，理解调用栈与队列的配合，是排查时序问题的关键。多用code标签里的Promise与async写法，可显著提升代码可读性。
JavaScript异步编程事件循环修改时间：2026-07-29 13:15:23