async/await执行优先级是否高于setTimeout回调？异步UI阻塞疑问

架构老林

2026-8-15

问题：异步计算未及时让步给UI更新与定时器回调

我写了一段代码，用户点击按钮后计算下一次本地可见日食的时间。因为计算耗时很长，我用嵌套async函数拆分计算，想让执行频繁让步避免浏览器卡顿。

简化后的测试案例代码如下：

window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 15000;

async function workWorkWork(msg) {
  return new Promise(async (resolve) => {
    const start = performance.now();

    while (performance.now() < start + 5000) {
      await new Promise((innerResolve) => {
        let t = 0;

        for (let i = 0; i < 1e7; ++i) t += Math.sin(Math.random());

        console.log(msg || t);
        // innerResolve(); // 我原以为这样就足够
        setTimeout(innerResolve); // 实际必须用这种方式
      });
    }

    resolve();
  });
}

let busy = false;

function doStart() {
  if (busy)
    return;

  const button = document.getElementById('my-button');

  button.innerText = 'Started';
  button.style.background = 'red';
  busy = true;

  (async () => {
    setTimeout(() => (button.innerText = 'Busy'), 1000);
    workWorkWork('other work');
    await workWorkWork();
    busy = false;
    button.innerText = 'Start';
    button.style.background = 'unset';
  })();
}

点击按钮后，我希望1秒后显示"Busy"提示，但实际UI几乎被阻塞，直到计算完成后提示才出现。控制台显示两个workWorkWork调用的输出会交错，说明实例间能正确让步，但async函数并未给之前队列中的setTimeout回调和DOM更新让步。只有在async函数内部使用setTimeout(innerResolve)，才能让定时器回调及时执行。最初在Angular中遇到这个问题，以为是Zone.js导致，但原生JavaScript中也能复现。

请问这是预期行为吗？是否有相关文档说明？

解答

这是完全符合JavaScript事件循环机制的预期行为，核心原因在于微任务与宏任务的执行优先级差异：

直接调用innerResolve()的问题
当你在内部Promise里直接同步调用innerResolve()时，这个Promise会立即被resolve，对应的await会把后续代码（也就是外层的while循环下一次迭代）放到微任务队列中。而JavaScript事件循环的规则是：当前宏任务执行完毕前，会先清空所有微任务队列中的任务。
你的workWorkWork函数本质上是在一个宏任务里不断生成微任务，循环往复，完全不给UI更新（属于宏任务）、setTimeout回调（属于宏任务）执行的机会——因为微任务队列永远优先被处理，浏览器根本没时间去处理宏任务队列里的UI渲染和定时器回调。
使用setTimeout(innerResolve)的作用
setTimeout会把innerResolve()的执行放到宏任务队列中。这意味着每次内部Promise的resolve都会触发一个新的宏任务，当前宏任务执行完毕后，浏览器会先处理之前已经在宏任务队列里的任务（比如1秒后的setTimeout回调、DOM更新），再执行下一轮的计算循环。这样就真正实现了"让步"，让UI和定时器有机会响应。

简单总结：

微任务（比如Promise的resolve回调）会在当前执行栈清空后立即执行，不会等待UI渲染或其他宏任务。
宏任务（比如setTimeout、UI渲染）需要等待所有微任务处理完毕后才会执行。

如果想让异步代码真正给UI和其他定时器让步，必须把让步逻辑放到宏任务队列中，setTimeout是最常用的方式，也可以用requestIdleCallback（针对非紧急任务）或requestAnimationFrame（针对与UI相关的任务）。

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