为什么你的异步代码总是不按套路出牌？深入揭秘JavaScript事件循环的真相

setTimeout(() => {
  console.log("我是定时器");
}, 0);

Promise.resolve().then(() => {
  console.log("我是Promise");
});

console.log("我是同步代码");

我是同步代码
我是Promise
我是定时器

function task1() {
console.log("任务1开始");
// 假设这里有个10秒的循环
for(let i = 0; i < 1000000000; i++) {}
console.log("任务1结束");
}

function task2() {
console.log("任务2");
}

task1();  // 这会卡死10秒
task2();  // 必须等task1完全结束才能执行

┌─────────────────────────────────┐
│     调用栈（Call Stack）        │  ← JavaScript代码在这执行
│     当前正在运行的函数           │
└──────────────┬──────────────────┘
               │ 栈空了？
               ↓
┌─────────────────────────────────┐
│  微任务队列（Microtask Queue）   │  ← Promise、async/await在这排队
│  - Promise.then()               │
│  - queueMicrotask()             │
│  - MutationObserver             │
└──────────────┬──────────────────┘
               │ 微任务全部清空？
               ↓
┌─────────────────────────────────┐
│  宏任务队列（Macrotask Queue）   │  ← setTimeout、DOM事件在这排队
│  - setTimeout/setInterval       │
│  - 用户交互事件                  │
│  - 网络请求完成                  │
└─────────────────────────────────┘

// 这会导致setInterval永远执行不了
function infiniteMicrotask() {
  Promise.resolve().then(() => {
    console.log("微任务");
    infiniteMicrotask();  // 无限递归创建新微任务
  });
}

infiniteMicrotask();

setInterval(() => {
  console.log("我永远不会被执行");
}, 1000);

console.log("脚本开始");

setTimeout(() => {
  console.log("计时器回调");
}, 0);

console.log("脚本结束");

脚本开始
脚本结束
计时器回调

console.log("1");

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

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

console.log("5");

1
5
3
4
2

┌─ 执行同步代码
│  ├─ console.log("1") → 输出"1"
│  ├─ setTimeout(...) → 回调进入宏任务队列
│  ├─ Promise.resolve().then(...) → 回调进入微任务队列
│  ├─ console.log("5") → 输出"5"
│  └─ 栈空！
│
├─ 检查微任务队列
│  ├─ 执行第一个then回调 → 输出"3"
│  ├─ 输出的第二个then入队
│  ├─ 执行第二个then回调 → 输出"4"
│  └─ 微任务队列清空！
│
└─ 检查宏任务队列
   └─ 执行setTimeout回调 → 输出"2"

async function getData() {
console.log("开始获取数据");
const data = awaitPromise.resolve("用户数据");
console.log("数据已取得:", data);
return data;
}

console.log("A");
getData();
console.log("B");

A
开始获取数据
B
数据已取得: 用户数据

function getData() {
  console.log("开始获取数据");
  return Promise.resolve("用户数据").then((data) => {
    console.log("数据已取得:", data);
    return data;
  });
}

// ❌ 错误的做法：阻塞事件循环
const ids = [1, 2, 3, 4, 5];

async function fetchUserData(ids) {
  for (const id of ids) {
    const data = await fetch(`/api/user/${id}`);
    console.log(data);
  }
}

// 这会串行执行，一个接一个等待，非常慢！

// ✅ 正确做法1：并行请求
asyncfunction fetchUserData(ids) {
const promises = ids.map(id => fetch(`/api/user/${id}`));
const results = awaitPromise.all(promises);
  results.forEach(data =>console.log(data));
}

// ✅ 正确做法2：考虑内存限制，分批并行
asyncfunction fetchUserDataBatch(ids, batchSize = 3) {
for (let i = 0; i < ids.length; i += batchSize) {
    const batch = ids.slice(i, i + batchSize);
    const promises = batch.map(id => fetch(`/api/user/${id}`));
    const results = awaitPromise.all(promises);
    results.forEach(data =>console.log(data));
  }
}

// 一个常见的场景：在React中处理大量数据更新
function processLargeDataSet(items) {
  items.forEach(item => {
    Promise.resolve().then(() => {
      // 处理数据
      updateUI(item);
    });
  });
}

processLargeDataSet(Array(10000).fill({}));

function processLargeDataSetOptimized(items) {
let index = 0;

function processNextBatch() {
    const batchSize = 100;
    const endIndex = Math.min(index + batchSize, items.length);
    
    for (let i = index; i < endIndex; i++) {
      updateUI(items[i]);
    }
    
    index = endIndex;
    
    if (index < items.length) {
      // 使用setTimeout让出控制权，允许浏览器渲染
      setTimeout(processNextBatch, 0);
    }
  }

  processNextBatch();
}

// 这段代码在Node.js和浏览器中的行为不同！

setTimeout(() => {
console.log("timer1");
}, 0);

setImmediate(() => {
console.log("immediate");
});

// Node.js输出：
// timer1
// immediate

// 浏览器只有setTimeout，setImmediate不存在

// ❌ 会阻塞事件循环
const result = hugeArray.map(item => heavyComputation(item));

// ✅ 分散处理
function processInChunks(array, processor, chunkSize = 100) {
returnnewPromise((resolve) => {
    let index = 0;
    const results = [];
    
    function processChunk() {
      const end = Math.min(index + chunkSize, array.length);
      for (let i = index; i < end; i++) {
        results.push(processor(array[i]));
      }
      index = end;
      
      if (index < array.length) {
        setTimeout(processChunk, 0);
      } else {
        resolve(results);
      }
    }
    
    processChunk();
  });
}

// ✅ 如果数据量不大，用Promise更高效
Promise.resolve().then(() => updateSmallUI());

// ❌ 用setTimeout会多消耗一个时间片
setTimeout(() => updateSmallUI(), 0);

同步代码 → 微任务 → 渲染（RAF触发） → 宏任务 → ...

// 这个回调会在下一帧渲染前执行
requestAnimationFrame(() => {
  element.style.opacity = 0.5;
  // 这个修改会被合并到即将发生的渲染中
});

// 想看看当前有多少微任务和宏任务待执行？
// （注意：JavaScript中没有官方API，但可以通过观察行为推断）

console.time("microtask");
Promise.resolve().then(() => {
console.timeEnd("microtask");
});

console.time("macrotask");
setTimeout(() => {
console.timeEnd("macrotask");
}, 0);

// microtask的执行时间会显著更短（更快执行）

// React 18的concurrent features使用微任务协调
// 当你使用useTransition时，更新被分解成微任务

import { useTransition } from'react';

function Component() {
const [isPending, startTransition] = useTransition();

function handleClick() {
    // 这个更新会被分成微任务执行
    // 不会完全阻塞渲染
    startTransition(() => {
      updateExpensiveState();
    });
  }

return<button onClick={handleClick}>
    {isPending ? '更新中...' : '点击'}
  </button>;
}

console.log('script start');

setTimeout(function() {
console.log('setTimeout1');
}, 0);

Promise.resolve()
  .then(function() {
    console.log('promise1');
    setTimeout(function() {
      console.log('setTimeout2');
    }, 0);
  })
  .then(function() {
    console.log('promise2');
  });

console.log('script end');

async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}

asyncfunction async2() {
console.log('async2');
}

console.log('start');
async1();
console.log('end');