如何实现prompt提示框仅在事件监听器执行完成后再弹出？

问题根因 #

浏览器的JavaScript执行线程和UI渲染线程是互斥的。你同步修改DOM的innerHTML属性后，浏览器不会立刻更新页面视图，而是会等当前JS执行栈完全清空后，再执行UI重绘、重排操作。而alert/prompt/confirm这类弹窗是同步阻塞方法，会直接卡住当前JS执行栈，导致UI更新被延后到弹窗关闭之后，所以会出现弹窗先展示、温度结果后渲染的问题。

解决方案 #

把弹窗逻辑放到异步任务中执行，等当前同步代码执行完成、UI渲染更新完毕后再触发弹窗，最简单的实现是用setTimeout设置0延迟：

0延迟的setTimeout不会立刻执行回调，而是会把回调推入宏任务队列，等待当前执行栈清空、UI渲染完成后再执行。

修改后的核心代码 #

只需要在changeTemp函数中，完成温度结果赋值的逻辑后，添加异步弹窗逻辑即可，修改后的完整函数如下：

function changeTemp() {
  const value = document.querySelector(".input").value ///input
  let numbaW = 1
  let numbaT = 2
  if (numbaW == iV) {
    let cetFa = value * (1.8) + 32
    screen.innerHTML = Math.round(cetFa) + "°F"
  } else if (numbaT == iV) {
    let fatCe = ((value - 32) * 5) / 9
    screen.innerHTML = Math.round(fatCe) + "°C"
  }
  // 新增异步弹窗逻辑
  setTimeout(() => {
    const toContinue = confirm("是否继续操作？")
    if (!toContinue) {
      // 退出页面逻辑，若当前页面不是用户打开的新标签页，window.close()可能无效，可以替换为跳转逻辑
      window.close()
      // 可选替代方案：返回上一页 window.history.back()
    }
  }, 0)
}

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