重置JavaScript秒表后无法从零启动问题排查

问题根源 #

• 重置按钮仅更新了界面显示、清除定时器，但未重置计时核心变量（milliseconds、seconds、minutes、hours），下次启动时这些变量仍保留上次停止时的数值，导致计时器从断点继续累加。
• 价格计算的初始值变量y未在重置时恢复为初始的3.90，价格也会延续之前的计算结果。
• run函数中存在语法错误：minutes == 0是比较运算符，应改为赋值运算符minutes = 0，否则分钟数不会正确归零。

修复代码 #

修改重置按钮的事件处理函数，添加变量重置逻辑，同时修复run函数的语法错误：

修正后的JavaScript代码 #

window.onload = function () {
  //global variables

  let interval = null;
  let timerId = null;
  let y = 3.90;
  let reversal = 20
  const output = document.querySelector('output');
  let maintime = document.getElementById('maintime');
  const start = document.getElementById('actioner');
  const clear = document.getElementById('reseter');
  let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];

  //If start is clicked
  start.addEventListener('click', () => {
    buttonAndTimer();
    startDrive();

  }); // end of func

  function buttonAndTimer() {
    start.innerText = 'Stop';
    if (!interval) {
      interval = setInterval(() => {
        run();
      }, 10);
    } else {
      clearInterval(interval)
      start.innerText = 'Resume';
      interval = null;
    };
  }

    function run() {
      milliseconds += 10;
      if (milliseconds == 1000) {     //note: 1000 milliseconds are 1 seconds
        milliseconds = 0;
        seconds++;
      };
      if (seconds == 60) {
        seconds = 0;
        minutes++;
      };
      if (minutes == 60) {
        minutes = 0; // 修复：将==改为=
        hours++;
      };

      h = hours < 10 ? '0' + hours : hours;
      m = minutes < 10 ? '0' + minutes : minutes;
      s = seconds < 10 ? '0' + seconds : seconds;
      ms = milliseconds < 100 ? '00' + milliseconds : milliseconds;

      //Template Literals 
      maintime.innerHTML = `${h} : ${m} : ${s} : ${ms} `
    };

 //calculating price
 function startDrive() {
  if (start.innerText != 'Resume') {
    output.innerHTML = y.toFixed(2) + '€';
    timerId = setInterval(() => {
      if (y < reversal) {
        y += 0.14375;
      } else if (y > reversal) {
        y += 0.103125;
      }
      output.innerHTML = y.toFixed(2) + "€";
    }, 5000);
  }
  /*Considered area */
  if (start.innerText == 'Resume') {

    clearInterval(timerId);
  }

} //end of func
   
// considered area
 clear.addEventListener('click', () => {
  clearInterval(interval);
  interval = null;
  // 重置计时变量
  [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
  maintime.innerHTML = '00:00:00:000';
  start.innerText = 'Start'
  clearInterval(timerId);
  timerId = null; // 改为null更规范
  // 重置价格变量
  y = 3.90;
  output.innerHTML = "";
})
  } //end of window.load

关键修改点 #

1. 在重置按钮的事件处理中，添加[milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];，将所有计时变量归零。
2. 添加y = 3.90;，恢复价格计算的初始值。
3. 将run函数中的minutes == 0改为minutes = 0，修复分钟归零的逻辑错误。
4. 将timerId = 0;改为timerId = null;，保持和其他定时器变量的一致性。

内容的提问来源于stack exchange，提问作者Özgür Sahin