JavaScript石头剪刀布游戏10秒倒计时结束调用结果函数的问题

现有代码存在的问题 #

• 缺少startCountdown函数实现，剪刀选择函数中错误调用了无参数的setInterval()
• 全局变量i重复声明，且未定义存储定时器ID的变量，无法在倒计时结束后正确清除定时器
• 未做重复点击拦截，倒计时过程中再次点击会触发多个定时器并行运行，导致计数异常
• myTimer函数里引用的myVar变量未定义，无法完成定时器清除

修复实现思路 #

1. 先定义全局变量存储定时器ID，每次启动倒计时前先清除已有定时器，避免重复计时
2. 补全startCountdown()函数，用setInterval启动每秒执行一次的倒计时
3. 修正剪刀选择函数的定时器调用，统一调用startCountdown()
4. 去除重复的变量声明，优化重复代码

修正后的核心代码 #

// 全局变量定义（不要重复声明i）
const timerDown = document.getElementById("XP")
const initialMessage = document.getElementById("initialMessage")
const userChoice = document.getElementById("userChoice")
const message = document.getElementById("message")
const computerCard = document.getElementById("computerres")
let paper = false
let rock = false
let scissors = false
let countDownTimer = null // 存储定时器ID
let i = 10 

initialMessage.innerHTML = 'Rock Paper or Scissors?'

// 新增倒计时启动函数
function startCountdown() {
  // 先清除已有定时器，避免重复计时
  if(countDownTimer) clearInterval(countDownTimer)
  // 重置倒计时初始值
  i = 10
  timerDown.innerText = i
  // 启动每秒执行一次的定时器
  countDownTimer = setInterval(myTimer, 1000)
}

function myTimer() {
  i--
  console.log(i)
  timerDown.innerText = i
  if (i === 0) {
    timerDown.innerText = ''
    algo()
    clearInterval(countDownTimer)
    countDownTimer = null // 重置定时器变量
    i = 10
  }
}

// 修正剪刀选择函数的定时器调用
function drawscissors() {
  scissors = true
  userChoice.innerHTML = 'You chose scissors!'
  initialMessage.innerHTML = ''
  console.log('user has chosen scissors')
  startCountdown() // 统一调用倒计时启动函数
}

其余的drawrock、drawpaper、algo函数你现有的逻辑可以保留正常使用。

补充说明 #

• setInterval(回调函数, 间隔毫秒数)：会按照设定的间隔时间重复执行回调，直到调用clearInterval(定时器ID)才会停止，适合需要重复更新的倒计时场景
• setTimeout(回调函数, 延迟毫秒数)：只会在延迟时间到了之后执行一次回调，适合只需要单次延迟执行的场景，如果你不需要显示倒计时数字只需要10秒后执行函数，用这个更简单，直接写setTimeout(algo, 10000)就可以

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