Javascript 秒表错误的重置值

Question

我正在尝试创建一个简单的 vanilla JS 秒表。设法让它工作但是当我单击我的重置按钮时，该值返回我的 innerHTML 更改，但是它在返回值 00:00:1 而不是 00:00:00 之前快速闪烁一秒钟。在它正确重置之前，我必须点击它两次。但是，当我暂停我的计时器然后重置时，它工作得很好。我的代码中的缺陷在哪里？

代码:

var status = 0;
var time = 0;

document.getElementById('start').addEventListener('click', start);
document.getElementById('pause').addEventListener('click', pause);
document.getElementById('reset').addEventListener('click', reset);


function start() {

  status = 1;
  document.getElementById('start').disabled = true;
  timer();


}

function pause() {
  status = 0;
  document.getElementById('start').disabled = false;
}

function reset() {

  time = 0;
  status = 0;

  document.getElementById('label').innerHTML = '00:00:00';
  document.getElementById('start').disabled = false;
}

function timer() {
  if (status == 1) {
    setTimeout(function() {
      time++;
      var min = Math.floor(time / 10 / 60);
      var sec = Math.floor(time / 10 % 60);
      var mill = time % 10;

      if (min < 10) {
        min = '0' + min;
      }

      if (sec >= 60) {
        sec = sec % 60;
      }

      if (sec < 10) {
        sec = '0' + sec;
      }

      document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill;
      timer();
    }, 100);
  }
}

<div id="wrapper">
  <h1 id="label">00:00:00</h1>
  <button id="start">Start</button>
  <button id="pause">Pause</button>
  <button id="reset">Reset</button>
</div>

Answer 1

这是因为 setTimeout，因为它计划每 100ms 运行一次，它会在您单击重置后运行一次(在 100ms 之后).为了防止它在重置后运行，您可以将超时存储在变量中并使用 clearTimeout 停止它:

var status = 0;
var time = 0;
var t; // the timeout

document.getElementById('start').addEventListener('click', start);
document.getElementById('pause').addEventListener('click', pause);
document.getElementById('reset').addEventListener('click', reset);


function start() {

  status = 1;
  document.getElementById('start').disabled = true;
  timer();


}

function pause() {
  status = 0;
  document.getElementById('start').disabled = false;
}

function reset() {

  time = 0;
  status = 0;
  clearTimeout(t); // stop the timeout
  document.getElementById('label').innerHTML = '00:00:00';
  document.getElementById('start').disabled = false;
}

function timer() {
  if (status == 1) {
    t = setTimeout(function() { // start the timeout
      time++;
      var min = Math.floor(time / 10 / 60);
      var sec = Math.floor(time / 10 % 60);
      var mill = time % 10;

      if (min < 10) {
        min = '0' + min;
      }

      if (sec >= 60) {
        sec = sec % 60;
      }

      if (sec < 10) {
        sec = '0' + sec;
      }

      document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill;
      timer();
    }, 100);
  }
}

<div id="wrapper">
  <h1 id="label">00:00:00</h1>
  <button id="start">Start</button>
  <button id="pause">Pause</button>
  <button id="reset">Reset</button>
</div>