为什么需要事件循环？

单线程的困境

JavaScript 是单线程的——同一时间只能做一件事。

就像只有一个厨师的小餐厅：如果厨师做完一道菜才接下一单，客人等得头发都白了。

所以 JavaScript 采用了异步回调的方式：点完单先去干别的，菜好了再叫你。

事件循环就是"传唤员"

事件循环就像餐厅里的传唤员：

• 厨房做好了菜，传唤员看看单子，喊"33号，你的菜好了"

• 如果你正在吃饭（执行其他代码），传唤员就等着

• 轮到你的时候，你放下筷子（执行完当前代码），去取菜（执行回调）

调用栈 — 厨师的工作台

代码是怎么"跑起来"的？

当你调用一个函数，这个函数就被放进调用栈里执行。

就像厨师在工作台上，一边做菜一边接新单，做完一单马上处理下一单

function cooking() {
  console.log('开始炒菜');
  fry();
  console.log('炒好了');
}


function fry() {
  console.log('放油');
  console.log('放菜');
  console.log('翻炒');
}


cooking();

执行顺序：

调用栈:
1. cooking() 入栈
2. console.log('开始炒菜') 入栈，执行，出栈
3. fry() 入栈
4. fry() 内的 console.log 依次执行
5. fry() 出栈
6. console.log('炒好了') 入栈，执行，出栈
7. cooking() 出栈

调用栈的特点

• 后进先出：就像叠盘子，最后放上去的先被用
• 同步执行：每个函数必须执行完，下一个才能进来
• 栈溢出：如果递归没终止，栈会无限增长直到崩溃

// 栈溢出示例
function recursive() {
  recursive();
}
recursive();
// RangeError: Maximum call stack size exceeded

任务队列 — 取餐口

异步代码放哪儿？

当遇到 setTimeout、Promise、事件回调 这些异步任务时，它们不会马上执行，而是被放到任务队列里。

就像点完单，服务员把单子放到取餐口，等叫号再去取。

事件循环的运行机制

事件循环的规则：

1. 首先执行调用栈里的所有同步代码
2. 调用栈清空后，去任务队列取一个任务执行
3. 完成后回到步骤1

console.log('1');


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


console.log('3');


// 输出：1 → 3 → 2
// 因为 setTimeout 的回调在任务队列，要等调用栈空才能执行

console.log('1');


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


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


console.log('4');


// 输出：1 → 4 → 3 → 2
// 同步代码 → 微任务 → 宏任务

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


Promise.resolve()
  .then(() => console.log('Promise1'))
  .then(() => console.log('Promise2'));


Promise.resolve()
  .then(() => console.log('Promise3'));


console.log('同步代码');


// 输出顺序：
// 同步代码
// Promise1
// Promise3
// Promise2      ← Promise.then 链式调用在同一个微任务队列
// setTimeout     ← 所有微任务完成后，才执行宏任务

嵌套的 Promise

async/await — 语法糖的秘密

async/await 是什么？

async/await 是 Promise 的语法糖，让异步代码看起来像同步代码

// Promise 写法
function getData() {
  return fetch('/api/user')
    .then(res => res.json())
    .then(data => console.log(data));
}


// async/await 写法
async function getData() {
  const res = await fetch('/api/user');
  const data = await res.json();
  console.log(data);
}

await 到底在等什么？

await 会暂停当前 async 函数的执行，等待 Promise 完成，然后继续执行后面的代码。

暂停期间，其他代码可以继续执行

async function example() {
  console.log('1');


  await fetch('/api/data');  // 这里"暂停"


  console.log('3');  // ← 这行去哪了？
}


console.log('2');
example();
console.log('4');


// 输出：2 → 1 → 4 → 3

await 后面那行代码去哪了？

await 后面的代码不会马上执行，而是被包成一个微任务。等 await 的 Promise resolve 后，这个微任务才会执行：

async function example() {
  console.log('1');


  await fetch('/api/data');  // Promise pending...
  // 下面的代码被包成微任务，要等 Promise 完成才执行


  console.log('3');  // ← 这行实际上是 await 的 resolve 后的回调
}


// 等价于：
function example() {
  console.log('1');
  return fetch('/api/data').then(() => {
    console.log('3');  // ← 这里
  });
}

async 函数返回值

async 函数总是返回一个 Promise：

错误处理

// try-catch
async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
  } catch (error) {
    console.log('出错了:', error);
  }
}


// Promise catch
async function fetchData() {
  const res = await fetch('/api/data').catch(err => console.log(err));
}

requestAnimationFrame — 动画的正确姿势

为什么不用 setInterval？

setInterval 不保证什么时候执行，也不保证每次间隔精确：

setInterval(() => {
  moveBall();  // 可能丢帧、卡顿
}, 16);  // 约60fps，但不一定准

requestAnimationFrame 的特点

• 浏览器优化：在下一次重绘之前执行，不丢帧
• 页面不可见时：自动暂停，节省性能
• 约60fps：和屏幕刷新率同步

function animate() {
  moveBall();
  requestAnimationFrame(animate);
}


requestAnimationFrame(animate);


// 取消动画
const id = requestAnimationFrame(animate);
cancelAnimationFrame(id);

执行顺序