如何在JavaScript重复调用prompt期间强制更新DOM？

问题根源 #

浏览器的JavaScript执行和页面渲染共享同一个线程，且遵循先执行同步代码，再处理渲染队列的规则。你的代码中，第一次prompt关闭后修改了DOM，但紧接着又调用了第二个同步的prompt函数，导致浏览器没有机会在两次prompt之间执行渲染，所以Test1和Test2会在第二个prompt关闭后才一起显示。

可行解决方案 #

核心思路是把第二个prompt的调用转为异步任务，让浏览器有时间完成第一次DOM更新的渲染后，再弹出第二个prompt。

方法1：使用setTimeout（最简洁）

将第二个prompt放入setTimeout回调中，哪怕延迟设为0ms，也会把任务加入宏任务队列，等当前同步代码执行完毕、渲染完成后再执行：

<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>
<h2>The prompt() Method</h2>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  let person = prompt("Please enter your name", "Prompt1");
  if (person != null) {
    document.getElementById("demo").insertAdjacentHTML('beforeend', "Test1<br>");
 }
  
  // 异步执行第二个prompt，给浏览器留渲染时间
  setTimeout(() => {
    person = prompt("Please enter your name", "Prompt2")
    if (person != null) {
      document.getElementById("demo").insertAdjacentHTML('beforeend', "Test2<br>");
    }
  }, 0);
}
</script>

</body>
</html>

方法2：使用requestAnimationFrame（更精准控制渲染时机）

利用requestAnimationFrame的特性，等待当前帧渲染完成后再执行第二个prompt：

<!DOCTYPE html>
<html>
<body>

<h1>The Window Object</h1>
<h2>The prompt() Method</h2>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  let person = prompt("Please enter your name", "Prompt1");
  if (person != null) {
    document.getElementById("demo").insertAdjacentHTML('beforeend', "Test1<br>");
 }
  
  // 第一个requestAnimationFrame在渲染前触发，第二个在渲染完成后触发
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      person = prompt("Please enter your name", "Prompt2")
      if (person != null) {
        document.getElementById("demo").insertAdjacentHTML('beforeend', "Test2<br>");
      }
    });
  });
}
</script>

</body>
</html>

原理说明 #

• setTimeout(0)会将回调函数推入宏任务队列，当前同步代码执行完后，浏览器会先处理渲染队列，完成DOM的视觉更新，再执行宏任务中的代码。
• 双层requestAnimationFrame则是利用API特性：第一次回调在浏览器准备渲染时触发，第二次回调会在当前帧渲染完成后执行，确保DOM更新已经显示在页面上，再弹出第二个prompt。

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