clearInterval（）不起作用，我無法弄清楚原因

Question

我正在嘗試將play/pause按鈕添加到計時器，該計時器具有根據isRunning的值決定要執行的操作的功能。 當第二次點擊我的按鈕而不是暫停時，計時器似乎添加了另一個setTimeout ，我無法弄清楚原因。

var isRunning = false;

function start() {
  if(isRunning == false) {
    isRunning = true;
    setInterval(time, 1000);
    document.getElementById("play").className = "fa fa-pause";
  } 
  else if(isRunning == true) {
    isRunning = false;
    document.getElementById("play").className = "fa fa-play";
    console.log(isRunning);
    clearInterval(time);
  }
}

document.getElementById("play").onclick = start;

Answer 1

var isRunning = false;
var timeoutId; // Where the timeout id will be stored.

function start() {
  if(isRunning == false) {
    isRunning = true;
    timeoutId = setInterval(time, 1000);
    document.getElementById("play").className = "fa fa-pause";
  } 
  else if(isRunning == true) {
    isRunning = false;
    document.getElementById("play").className = "fa fa-play";
    console.log(isRunning);
    clearInterval(timeoutId); // clearInterval using timeout id saved before.
  }
}

document.getElementById("play").onclick = start;

有關更多信息，請訪問https://developer.mozilla.org/es/docs/Web/API/WindowTimers/setTimeout