JS条件语句逻辑正常但无法输出HTML内容的问题求助

我是JS新手，练习条件语句时碰到个问题——各条件分支的逻辑是对的（console.log输出符合预期），但就是没法把对应内容输出到HTML元素里。下面是两段测试代码，一段用jQuery，一段用原生JS，都存在这个问题：

第一段（jQuery版本） #

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

    <title>Tester</title>
  </head>

  <body>
    <p id="test"></p>
    <script>
      const max = 5;
      const ranNumber = Math.floor(Math.random() * max) + 1;
      console.log(ranNumber);
      let correct = false;
      while (!correct) {
        let guess = prompt("Guess a Number 1 - " + max);
        guess = Number(guess);
        if (guess === ranNumber) {
          correct = true;
          $("#test").html("Your guess was correct!");
        } else if (guess > ranNumber) {
          $("#test").html("Your guess was too high!");
        } else {
          document.getElementById("test").innerHTML = "Your guess too low!";
        }
      }
    </script>
  </body>
</html>

第二段（原生JS版本） #

<!DOCTYPE html>
<html>
  <head>
    <title>Tester</title>
  </head>

  <body>
    <p id="test"></p>
    <script>
      const max = 5;
      const ranNumber = Math.floor(Math.random() * max) + 1;
      console.log(ranNumber);
      let correct = false;
      while (!correct) {
        let guess = prompt("Guess a Number 1 - " + max);
        guess = Number(guess);
        if (guess === ranNumber) {
          correct = true;
          document.getElementById("test").innerHTML = "Your guess was correct!";
        } else if (guess > ranNumber) {
          document.getElementById("test").innerHTML =
            "Your guess was too high!";
        } else {
          document.getElementById("test").innerHTML = "Your guess too low!";
        }
      }
    </script>
  </body>
</html>

问题原因 #

prompt()是阻塞式函数，它会暂停浏览器的UI渲染线程，直到用户关闭弹窗。也就是说，你在while循环里每次设置innerHTML或html()后，浏览器根本没机会更新页面，直到整个循环结束（用户猜对数字），才会一次性渲染最终的内容，导致中间的提示信息看不到。

解决方案 #

把同步的while循环改成异步的递归调用，用setTimeout()把下一次prompt()调用放到浏览器的异步队列里，这样浏览器就有时间先更新页面内容，再弹出下一个输入框。

修改后的原生JS代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Tester</title>
  </head>
  <body>
    <p id="test"></p>
    <script>
      const max = 5;
      const ranNumber = Math.floor(Math.random() * max) + 1;
      console.log(ranNumber);
      let correct = false;

      function makeGuess() {
        let guess = prompt("Guess a Number 1 - " + max);
        guess = Number(guess);
        if (guess === ranNumber) {
          correct = true;
          document.getElementById("test").innerHTML = "Your guess was correct!";
        } else if (guess > ranNumber) {
          document.getElementById("test").innerHTML = "Your guess was too high!";
          // 异步触发下一次猜测，给浏览器渲染时间
          setTimeout(makeGuess, 0);
        } else {
          document.getElementById("test").innerHTML = "Your guess too low!";
          setTimeout(makeGuess, 0);
        }
      }

      // 启动游戏
      makeGuess();
    </script>
  </body>
</html>

修改后的jQuery代码 #

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <title>Tester</title>
  </head>
  <body>
    <p id="test"></p>
    <script>
      const max = 5;
      const ranNumber = Math.floor(Math.random() * max) + 1;
      console.log(ranNumber);
      let correct = false;

      function makeGuess() {
        let guess = prompt("Guess a Number 1 - " + max);
        guess = Number(guess);
        if (guess === ranNumber) {
          correct = true;
          $("#test").html("Your guess was correct!");
        } else if (guess > ranNumber) {
          $("#test").html("Your guess was too high!");
          setTimeout(makeGuess, 0);
        } else {
          $("#test").html("Your guess too low!");
          setTimeout(makeGuess, 0);
        }
      }

      makeGuess();
    </script>
  </body>
</html>

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