JavaScript石头剪刀布游戏setTimeout延迟执行语句被跳过问题修复

你的代码存在3个核心错误，直接导致3秒延迟效果完全失效：

• setTimeout(getCPUHand, 3000) 仅会在3秒后调用getCPUHand()拿到返回值，但完全没有把返回值更新到页面对应元素上
• 紧跟在setTimeout后的cpu_item.textContent = "Computer: " + getCPUHand();是同步执行代码，会在设置完"Processing output..."提示后立刻覆盖文本，根本不会等待3秒再执行
• clearTimeout(getCPUHand)用法错误，clearTimeout需要传入setTimeout返回的定时器ID才能生效，直接传入函数名没有任何清除作用

提前声明变量存储定时器ID，把更新电脑出拳的逻辑放到setTimeout的回调函数内执行，修正后的完整JS代码如下：

let p_item = document.getElementById("player-item");
let cpu_item = document.getElementById("computer-item");
let items = ["Rock", "Paper", "Scissors"];
// 存储定时器ID，供重置游戏时清除
let cpuTimer = null;

function getPlayerHand() {
  let p_index = Math.floor(Math.random() * 3);
  return items[p_index];
}

function getCPUHand() {
  let cpu_index = Math.floor(Math.random() * 3);
  return items[cpu_index];
}

function startGame() {
  // 先清除上一局未执行完的定时器，避免连续点击导致结果重复触发
  clearTimeout(cpuTimer);
  p_item.textContent = "Player: " + getPlayerHand();
  cpu_item.textContent = "Computer: Processing output...";
  // 3秒后在回调函数内更新电脑出拳结果
  cpuTimer = setTimeout(() => {
    cpu_item.textContent = "Computer: " + getCPUHand();
  }, 3000);
}

function playAgain() {
  // 传入正确的定时器ID清除倒计时
  clearTimeout(cpuTimer);
  p_item.textContent = "Player: ";
  cpu_item.textContent = "Computer: ";
}

原有HTML代码不需要任何修改，替换JS代码后即可实现预期效果：点击START GAME按钮后立刻显示玩家随机出拳结果+电脑处理中提示，等待3秒后再展示电脑的随机出拳结果；点击PLAY AGAIN按钮会直接中断未走完的倒计时，重置页面显示内容。

补充说明：JavaScript中setTimeout属于异步API，不会阻塞后续代码的执行，你感知到的"逻辑语句被跳过"本质是你预期会等待3秒的位置根本没有产生阻塞，代码直接向下执行完成了赋值。

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