无法清除间隔（）

Question

最近我在 JavaScript 做一个秒表项目。我遇到的事情很少。首先，当我将变量分配给 setInterval() 函数时，如 let sInterval = setInterval(functionName, milliseconds)。我无法将它传递给 eventListener。但是当我这样做时：sInterval = () => setInterval(functionName, milliseconds)，我可以将它传递给 eventListener 并启动秒表。但是当我现在想停止秒表时，它不起作用。我不知道出了什么问题，也不知道如何解决。请帮忙：/ 这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="stopwatch">
        <meta name="description" content="stopwatch">
        <meta name="author" content="Nick">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="stopwatch.css">
        <script src="stopwatch.js"></script>
    </head>
    <body>
        <h1>STOPAWATCH</h1>
        <h1>JAVASCRIPT STOPWATCH</h1>
        <div id="stopwatch"></div>
        <button id="button-start">Start</button>
        <button id="button-stop">Stop</button>
        <button id="button-reset">Reset</button>
    </body>
</html>

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    text-align: center;
    background-color: orange;
    font-family:'Courier New', Courier, monospace;
    font-size: 100%;
    color: white;
}
h1 {
    font-size: 3em;
    font-weight: normal;
}
#stopwatch {
    font-size: 3em;
    margin-bottom: 20px;
}
[id|="button"] {
    background-color: orange;
    color: white;
    width: 20%;
    height: 80px;
    font-size: 1.5em;
    margin: 3%;
    border: 1px solid white;
    border-radius: 5px;
}
[id|="button"]:hover {
    cursor: pointer;
    color: orange;
    background-color: white;
}

window.onload = () => {
    let start = document.getElementById("button-start");
    let stop = document.getElementById("button-stop");
    let reset = document.getElementById("button-reset");
    let stopwatch = document.getElementById("stopwatch");
    let h, m, s;
    initialize = () => {
        h = m = s = "0" + 0;
        stopwatch.innerHTML = `${h}:${m}:${s}`;
    }
    let sInterval = () => setInterval(() => {
        s++;
        if (s < 10 && s[0] !== "0") {
            s = "0" + s;
        } else if (s === 60) {
            m++;
            s = "0" + 0;
        }
        if (m < 10 && m[0] !== "0") {
            m = "0" + m;
        } else if (m === 60) {
            h++;
            m = "0" + 0;
        }
        if (h < 10 && h[1] !== "0") {
            h = "0" + h;
        }
        stopwatch.innerHTML = h + ":" + m + ":" + s;
    }, 1000);
    reset.addEventListener("click", () => {
        clearInterval(sInterval);
        initialize();
    }); 
    start.addEventListener("click", sInterval);
    stop.addEventListener("click", clearInterval(sInterval));
    initialize();
}

Answer 1

clearInterval() 的参数实际上不是“您传递给 setInterval() 的函数”。它是“相应调用 setInterval() 返回的 ID”

尝试这样的事情：

let sInterval = () => {
    s++;
    ...
};

let intervalID = setInterval(sInterval, 1000);
reset.addEventListener("click", () => {
    clearInterval(intervalID);
    ...
}

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

Answer 2

函数 setInterval(cb, interval [, args]) 有 3 个参数和 returns 您设置的时间间隔的 ID。此 Id 用于在必要时使用 clearInterval(id) 函数清除间隔。所以你的代码应该是这样的 ->

startStopWatch = () => {
    // incremental logic for seconds 
    // goes here
}

const id = setInterval(startStopWatch, 1000);

resetButton.addEventListener('click', () => clearInterval(id))

无法清除间隔（）

Unable to clearInterval()

javascript

addeventlistener

setinterval

clearinterval