为何在事件处理器中使用setTimeout()会阻塞，未表现异步特性？

我写了一个CPU密集型的loop函数，想用setTimeout(0)让它异步执行，但遇到了奇怪的现象：

• 在点击事件处理器里调用setTimeout(loop, 0)后，再点击另一个按钮，无法立即触发对应的事件，页面会卡住直到loop执行完
• 但直接在全局作用域里调用setTimeout(loop, 0)，却能得到正常的异步执行效果

相关代码如下：

const startTimer = document.querySelector('#startTimer');
const btnShowMex = document.querySelector('#btnShow');
const h2 = document.querySelector('#testo');

let num = 0;

function loop() {
  for (let i = 0; i < 999_000_000; i++) {
    num += 1;
  }
  console.log(`end loop`);
}

startTimer.addEventListener('click', () => {
  setTimeout(loop, 0);
});

btnShowMex.addEventListener('click', () => {
  console.log('message');
});

脱离事件处理器的测试代码及输出：

console.log('start');
setTimeout(loop, 0);
console.log('end');

// 输出：
// start
// end
// end loop

问题根源：JavaScript单线程与事件循环机制 #

别被setTimeout(0)的"异步"表象迷惑，本质原因是JavaScript是单线程的，所有任务都在主线程的事件循环里排队执行：

1. 事件处理器本身就是宏任务：当你点击startTimer按钮时，点击事件的回调会被加入宏任务队列，主线程执行这个回调时，调用setTimeout只是把loop函数放到下一个宏任务队列里，并不会立即执行。
2. 当前宏任务执行完才会处理下一个：点击事件的回调执行完后，主线程会立刻取出队列里的loop任务执行。而loop是CPU密集型操作，会占用主线程很长时间，这期间所有新的用户交互（比如点击btnShowMex）都会被放到宏任务队列里排队，必须等loop执行完才能处理，所以页面会卡住，无法立即响应新的点击。
3. 全局执行时的差异：全局作用域里的代码是初始执行栈，console.log('start')和console.log('end')执行完后，执行栈为空，才会去处理setTimeout的loop任务。这时候没有其他待处理的用户交互任务，所以看起来是"异步"，但如果此时你快速点击按钮，同样会触发阻塞，因为loop执行时主线程被占满了。

解决方法 #

要真正避免阻塞UI，得把CPU密集型任务移出主线程，有两种常用方案：

1. 使用Web Workers（推荐）

Web Workers允许在后台线程执行脚本，完全不阻塞主线程：

// main.js
const startTimer = document.querySelector('#startTimer');
const btnShowMex = document.querySelector('#btnShow');

startTimer.addEventListener('click', () => {
  const worker = new Worker('worker.js');
  worker.postMessage('start');
  worker.onmessage = (e) => {
    console.log(e.data); // 接收worker的执行结果
    worker.terminate();
  };
});

btnShowMex.addEventListener('click', () => {
  console.log('message');
});

// worker.js
self.onmessage = (e) => {
  let num = 0;
  for (let i = 0; i < 999_000_000; i++) {
    num += 1;
  }
  self.postMessage(`end loop`);
};

2. 拆分任务为多个小批次执行

如果不能用Web Workers，可以把大循环拆分成多个小循环，每次执行一部分后让出主线程：

function loopBatch(total, batchSize, current = 0, num = 0) {
  const end = Math.min(current + batchSize, total);
  for (let i = current; i < end; i++) {
    num += 1;
  }
  if (end < total) {
    setTimeout(() => loopBatch(total, batchSize, end, num), 0);
  } else {
    console.log(`end loop`);
  }
}

startTimer.addEventListener('click', () => {
  loopBatch(999_000_000, 10_000_000); // 每次执行1000万次
});

这样每次小循环执行完，主线程会有机会处理其他事件（比如点击btnShowMex），不会出现完全卡住的情况。

内容的提问来源于stack exchange，提问作者Edoardo