重置秒表后需双击才能启动的问题排查与解决

问题原因 #

重置按钮的点击事件中，仅清除了定时器、重置了计时数值并修改了按钮显示文本，但未将定时器状态变量timerStatus重置为初始的'stopped'。

假设重置前秒表处于'started'或'paused'状态，重置后timerStatus仍保留该状态值：

• 若重置前是'started'，第一次点击按钮会触发“暂停”逻辑，第二次点击才会启动计时；
• 若重置前是'paused'，第一次点击按钮会尝试重新启动计时，但界面显示的是“Play”，逻辑不符且会造成状态混乱。

修复代码 #

只需在重置函数中添加一行代码，将timerStatus重置为'stopped'：

reset.addEventListener('click', function() {
  window.clearInterval(timerInterval);
  seconds = 0;
  minutes = 0;
  hours = 0;
  // 添加这行，重置状态为初始的stopped
  timerStatus = 'stopped';
  document.getElementById('start').innerHTML = `<i id="play" >Play</i>`;
  document.getElementById('timer').innerHTML = "00:00:00"
})

修复效果 #

重置后timerStatus回到初始状态，此时点击“Play”按钮会直接触发timerStatus === 'stopped'分支，启动定时器并切换按钮为“Pause”，无需两次点击即可正常计时。

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