如何用Promise运行耗时函数且不阻塞JavaScript运行时

问题核心 #

你的同步耗时函数computation()会直接阻塞事件循环，导致后续同步代码（比如console.log(2)）必须等它执行完才能运行。要实现非阻塞，必须把耗时任务移出主线程的同步执行队列，放到宏任务队列中，同时用Promise来管理结果回调。

修正后的代码 #

// 模拟耗时的同步计算函数
function computation() {
  let num = 0;
  for (let i = 0; i < 60000000; i++) {
    num++;
  }
  return num + 1;
}

console.log(1);

// 关键：在Promise执行器内部用setTimeout推迟耗时任务
const p = new Promise((resolve) => {
  setTimeout(() => {
    const result = computation();
    resolve(result);
  }, 0);
});

console.log(2);

// 绑定结果处理回调
p.then((result) => {
  console.log(result);
  console.log(result % 2 === 1 ? 'odd' : 'even');
});

为什么这样能达到期望输出？ #

1. 主线程优先执行同步代码：创建Promise时，执行器里仅同步调用了setTimeout（这一步几乎不耗时），所以主线程会立刻继续执行console.log(2)，先输出1→2。
2. 耗时任务延后执行：setTimeout会把computation()的执行放到宏任务队列，等主线程所有同步代码跑完后，事件循环才会处理这个宏任务，执行耗时计算。
3. Promise回调触发：计算完成后调用resolve(result)，触发then里的回调，依次输出60000001→odd，完全符合你的期望顺序。

你之前的错误点 #

你尝试用setTimeout包裹整个Promise的创建，导致p还未被赋值就调用.then()，自然会报未定义错误。正确的做法是先创建Promise对象并赋值给p，再把耗时任务放到Promise执行器内部的setTimeout中，这样p在绑定then回调时已经是有效的Promise实例。

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