如何实现按下按钮重置倒计时计时器？为何计时停在0:1？

问题1：无法重置倒计时的原因 #

每次点击按钮时你只清除了定时器，但没把time变量重置回初始值（startingCount * 60），所以重新启动时会接着上次剩余的时间继续，而非从头开始。

问题2：计时停在0:1的原因 #

1. 逻辑顺序错误：先计算当前分/秒，再执行time--，导致最后一次有效显示的是time=1时的结果（0:01），之后time变为-1，不满足time>=0的条件，也触发不了time===0的判断，因此停在0:01。
2. clearInterval参数错误：你传了time，但正确参数应该是定时器实例myTimer。
3. 条件判断冗余：else if (time === 0)永远不会触发，因为当time原本为0时，前一步time--已经让它变成-1了。

修改后的完整代码 #

JavaScript

let startingCount = 5
let time = startingCount * 60
let spaceForTime = document.getElementById('countdown')

let myTimer = null

function timer() {
  // 清除现有定时器
  if (myTimer !== null) {
    clearInterval(myTimer)
  }
  // 重置时间为初始值
  time = startingCount * 60
  // 启动新的定时器
  myTimer = setInterval(function() {
    let seconds = time % 60
    let minutes = Math.floor(time / 60)
    seconds = seconds < 10 ? '0' + seconds : seconds
    
    // 先根据当前time更新显示，再减少时间
    spaceForTime.innerHTML = `${minutes}:${seconds}`
    
    // 到达终点时触发结束逻辑
    if (time === 0) {
      spaceForTime.innerText = "Move onto the next question!"
      clearInterval(myTimer)
      myTimer = null // 重置定时器实例，避免后续逻辑混乱
      return
    }
    
    time--
  }, 1000);
}

HTML

<div id="button">
  <button onclick="timer()" id="letsChat">Let's Chat!</button>
</div>
<span id="countdown"></span>

关键修改点说明 #

• 点击按钮时新增time = startingCount * 60，强制重置时间变量，实现从头倒计时。
• 调整逻辑顺序：先基于当前time值更新显示，再执行time--，确保最后一次显示0:00后触发结束文本。
• 修正clearInterval的参数为myTimer，并在倒计时结束后重置myTimer为null，避免后续操作出错。
• 简化终止判断：当time === 0时直接触发结束逻辑，去掉冗余的分支判断。

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