不借助Web API能否编写异步JavaScript代码运行无API参与的耗时函数？

首先明确结论：纯ECMAScript语言本身不提供异步执行同步耗时任务的能力，完全不借助任何宿主API（含浏览器Web API、Node.js API）的前提下，无法实现你要的非阻塞异步运行效果。JavaScript的单线程同步执行是语言层面的设计，所有异步能力均来自宿主环境的支持。

原有代码的问题 #

你给出的apple是纯同步循环函数，调用后会直接占用主线程直到循环跑完，才会执行后续的console.log("end")，所以看不到异步效果。

浏览器环境下可行的实现方案 #

以下方案基于浏览器内置Web API实现，无需引入额外依赖：

方案1：基于setTimeout实现宏任务异步 #

将apple函数放到宏任务队列，主线程会先跑完所有同步代码后再执行耗时逻辑，符合异步执行的预期：

console.log("start")

function apple() {
  let appleCount = 10;
  while (appleCount < 1000000) {
    appleCount = appleCount + 10;
    appleCount = appleCount * 0.0000052
  }
  console.log("apple函数执行完成")
}

// 延迟0ms将apple丢入宏任务队列
setTimeout(apple, 0)
console.log("end")

执行输出顺序为：start → end → apple函数执行完成。

方案2：基于Web Worker实现多线程异步 #

如果apple函数耗时极长，用setTimeout仍然会阻塞主线程导致页面卡顿，可以用Web Worker将耗时逻辑放到独立线程运行，完全不影响主线程的交互：

console.log("start")

// 生成Worker线程跑耗时逻辑
const appleWorker = new Worker(URL.createObjectURL(new Blob([`
  let appleCount = 10;
  while (appleCount < 1000000) {
    appleCount = appleCount + 10;
    appleCount = appleCount * 0.0000052
  }
  self.postMessage('apple函数执行完成')
`], { type: 'application/javascript' })))

// 监听Worker返回的执行结果
appleWorker.onmessage = (e) => {
  console.log(e.data)
  appleWorker.terminate()
}

console.log("end")

这种方案下哪怕apple逻辑跑几分钟，页面都不会出现卡顿。

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