Javascript StopWatch错误的重置值

Question

我正在尝试制作一款简单的香草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>

Answer 2

原因是我认为存在轻微的延迟，并且您实际上并未清除启动时运行的超时。跟踪超时ID然后在需要时适当清除它是一种很好的做法。

＆＃13;

＆＃13;

var status = 0;
var time = 0;
var timeoutId;

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(timeoutId);

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

function timer() {
  if (status == 1) {
    timeoutId = 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);
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

简单来说，你必须删除setTimeout回调函数

＆＃13;

＆＃13;

var timerObj = null; // NEW LINE
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() {
  clearTimeout(timerObj ); // new LINE
  status = 0;
  document.getElementById('start').disabled = false;
  time = 0;
  document.getElementById('label').innerHTML = '00:00:00';
}

function timer() {
  if (status == 1) {
    timerObj = setTimeout(function() {   // changed LINE
      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);
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;