我该如何修复这个计时器？

Question

我正在编写一个计时器，我可以暂停它并再次启动它，但每次我单击“开始”时，每次单击都会变得更快。有什么办法可以解决这个问题吗？

我需要它能够启动和停止，没有副作用，也没有加速。超级简单，但我不明白。

let seconds = 0
let decisecond = 0
let centisecond = 0
let millisecond = 0
let timerStarted = false

function start() {
  timerStarted = false
  setInterval(startmillisecond, 10)
}

function startmillisecond() {
  if (!timerStarted) {
    millisecond++
    if (millisecond === 10) {
      millisecond -= 10
      centisecond++
    }
    if (centisecond === 10) {
      centisecond -= 10
      decisecond++
    }
    document.getElementById("timer").innerHTML = decisecond + '.' + centisecond + millisecond
  }
}

function pause() {
  timerStarted = true
}

td {
  border: 1px solid black;
  height: 50px;
  width: 500px;
}

<table>
  <td align="center">
    <h1 id="timer">0.00</h1>
  </td>
  <button onclick="start()">Start</button>
  <button onclick="pause()">Pause</button>
</table>

Answer 1

您在未清除之前的间隔的情况下调用

setInterval()

，导致多个间隔同时运行，使得计时器看起来随着每次开始点击而加快。您需要先清除之前的间隔，然后才能开始新的间隔。

    let seconds = 0;
    let decisecond = 0;
    let centisecond = 0;
    let millisecond = 0;
    let timerStarted = false;
    let intervalID;

    function start() {
      if (!timerStarted) {
        timerStarted = true;
        intervalID = setInterval(startmillisecond, 10);
      }
    }

    function startmillisecond() {
      millisecond++;
      if (millisecond === 10) {
        millisecond -= 10;
        centisecond++;
      }
      if (centisecond === 10) {
        centisecond -= 10;
        decisecond++;
      }
      document.getElementById("timer").innerHTML = decisecond + '.' + centisecond + millisecond;
    }

    function pause() {
      timerStarted = false;
      clearInterval(intervalID);
    }

    td {
      border: 1px solid black;
      height: 50px;
      width: 500px;
    }

  <table>
    <td align="center">
      <h1 id="timer">0.00</h1>
    </td>
    <button onclick="start()">Start</button>
    <button onclick="pause()">Pause</button>
  </table>