在变量中使用 clearInterval [重复]

Question

我正在创建一个简单的 JavaScript 计时器。首先，这是我正在使用的代码：

//Variables used for the timer
var timer = "waiting",
    seconds = 0,
    minutes = 0,
    extraFill1 = "",
    extraFill2 = "";

//Check whether to start or stop the timer
function toggleClock() {
    if (timer === "waiting") {
        setInterval(start, 1000);
        timer = "executing";
        document.getElementById("btn").innerText = "Stop";
    }
    else {
        clearInterval(start);
        timer = "waiting";
        document.getElementById("btn").innerText = "Start";
    }   
}

//Increment seconds and display correctly
function start() {
    seconds++;

    //Add a leading zero for 1 digit numbers (seconds)
    if (seconds < 10 || seconds === 60) {
        extraFill1 = "0";
    }
    else {
        extraFill1 = "";
    }

    //Increment minute when seconds reaches 60
    if (seconds === 60) {
        minutes += 1;
        seconds = 0;
    }

    //Add a leading zero for 1 digit numbers (minutes)
    if (minutes < 10) {
        extraFill2 = "0";
    }
    else {
        extraFill2 = "";
    }

    //display results
    document.getElementById("result").innerHTML = extraFill2 + minutes + ":" + extraFill1 + seconds;
}

在我的第一个函数toggleClock() 中，我已经声明如果timer !== waiting，那么我们执行clearInterval(start)。如果timer === "executing，我想clearInterval(start)。这不起作用（我认为这是因为它具有本地范围？）。为了解决这个问题，我尝试写：

var myTimer = setInterval(start, 1000);

我计划在我想启动计时器时调用 myTimer。相反，一旦加载页面（并且声明了变量），间隔就会开始。

如何设置函数的时间间隔（单击按钮时），并能够稍后停止/清除时间间隔（通过按下相同的按钮）？

Answer 1

您需要将之前调用setInterval 的结果传递给clearInterval；您没有将函数传递给clearInterval，而是将其传递给intervalID。例如：

let clockInterval;
function toggleClock() {
  if (timer === "waiting") {
    clockInterval = setInterval(start, 1000);
    timer = "executing";
    document.getElementById("btn").innerText = "Stop";
  }
  else {
    clearInterval(clockInterval);
    timer = "waiting";
    document.getElementById("btn").innerText = "Start";
  }   
}