深入理解 JavaScript 事件循环

探索 JavaScript 事件循环机制，理解同步、异步、宏任务和微任务的执行顺序。

#JavaScript #前端 #教程

深入理解 JavaScript 事件循环

JavaScript 的事件循环是理解异步编程的核心概念。

什么是事件循环？

事件循环是 JavaScript 运行时的一个机制，用于处理异步操作。

调用栈

JavaScript 是单线程的，它只有一个调用栈：

function foo() {
  console.log('foo');
  bar();
}


function bar() {
  console.log('bar');
}


foo();

事件循环示例

console.log('1');


setTimeout(() => {
  console.log('2');
}, 0);


Promise.resolve().then(() => {
  console.log('3');
});


console.log('4');

输出顺序是：1, 4, 3, 2

宏任务和微任务

  • 宏任务：setTimeout, setInterval, requestAnimationFrame
  • 微任务：Promise.then, MutationObserver

微任务总是在宏任务之前执行。

理解事件循环

┌─────────────────────────────┐
│        Event Loop           │
│                             │
│  ┌──────────┐  ┌─────────┐  │
│  │  调用栈  │  │ 宏任务队列│  │
│  └──────────┘  └─────────┘  │
│         ↓           ↑       │
│  ┌──────────┐               │
│  │ 微任务队列│───────────────│
│  └──────────┘               │
└─────────────────────────────┘

理解事件循环是掌握 JavaScript 异步编程的关键！

评论