为何使用下述代码时浏览器无法显示石头剪刀布游戏结果？

问题出在浏览器的渲染阻塞机制：

prompt、confirm这类原生弹窗是阻塞式操作——弹窗弹出时，浏览器会暂停所有页面渲染和JavaScript执行，必须等用户完成弹窗交互（点击确定/取消）才会继续执行后续逻辑。

你的代码里，刚把对战结果写入<p>标签，立刻就调用confirm弹出确认框。这时候浏览器还没来得及把新内容渲染到页面上，就被confirm卡住了。等用户处理完确认框，要么弹出新的prompt进入下一轮，要么结束程序，根本没机会看到之前的对战结果。而alert本身是弹窗，内容直接在弹窗里显示，所以不会有这个问题。

修复方法 #

给confirm加一个极小的延迟，让浏览器先完成页面渲染，再弹出确认框。修改后的代码如下：

JavaScript代码 #

function playRound() {
  let playerMove = prompt('请输入你的出招：石头/剪刀/布');
  let computerMove = ['rock', 'paper', 'scissors'];
  let result = '';

  switch (playerMove) {
    case 'rock':
      result = `${computerMove[Math.floor(Math.random() * 3)]} vs 你的石头`;
      break;
    case 'paper':
      result = `${computerMove[Math.floor(Math.random() * 3)]} vs 你的布`;
      break;
    case 'scissors':
      result = `${computerMove[Math.floor(Math.random() * 3)]} vs 你的剪刀`;
      break;
    default:
      result = '你得先搞懂石头剪刀布怎么玩啊！';
  }

  // 先更新页面显示结果
  document.querySelector('p').textContent = result;
  // 延迟10毫秒弹出确认框，给浏览器留足渲染时间
  setTimeout(() => {
    if (confirm('再来一局？')) {
      playRound();
    }
  }, 10);
}

// 启动游戏
playRound();

HTML代码 #

<h2>石头剪刀布</h2>
<p></p>

这样修改后，每局游戏结束时，页面会先显示对战结果，再弹出确认弹窗，你就能正常看到每局的结果了。

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