Javascript 无法清除间隔（）_Javascript_Setinterval_Addeventlistener_Clearinterval

Javascript 无法清除间隔（）

javascript

Javascript 无法清除间隔（）,javascript,setinterval,addeventlistener,clearinterval,Javascript,Setinterval,Addeventlistener,Clearinterval,最近我在用JavaScript做一个秒表项目。我遇到的事情很少。首先，当我为setInterval（）函数分配一个变量时，比如let sInterval=setInterval（functionName，毫秒）。我无法将其传递给eventListener。但是当我这样做时：sInterval=（）=>setInterval（functionName，毫秒），我可以将它传递给eventListener并启动秒表。但是当我现在想停止秒表时，它就不工作了。我不知道出了什么问题，也不知道如何解决。请帮助

最近我在用JavaScript做一个秒表项目。我遇到的事情很少。首先，当我为setInterval（）函数分配一个变量时，比如

let sInterval=setInterval（functionName，毫秒）

。我无法将其传递给eventListener。但是当我这样做时：

sInterval=（）=>setInterval（functionName，毫秒）

，我可以将它传递给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>

window.onload=（）=>{
let start=document.getElementById（“按钮开始”）；
let stop=document.getElementById（“按钮停止”）；
让重置=document.getElementById（“按钮重置”）；
让秒表=document.getElementById（“秒表”）；
设h，m，s；
初始化=（）=>{
h=m=s=“0”+0；
stopwatch.innerHTML=`${h}:${m}:${s}`；
}
设sInterval=（）=>setInterval（（）=>{
s++；
如果（s<10&&s[0]！=“0”）{
s=“0”+s；
}如果（s==60），则为else{
m++；
s=“0”+0；
}
如果（m<10&&m[0]！=“0”）{
m=“0”+m；
}否则如果（m==60）{
h++；
m=“0”+0；
}
如果（h<10&&h[1]！=“0”）{
h=“0”+h；
}
stopwatch.innerHTML=h+“：“+m+”：“+s；
}, 1000);
reset.addEventListener（“单击”，（）=>{
clearInterval（sInterval）；
初始化（）；
}); 
start.addEventListener（“单击”，sInterval）；
stop.addEventListener（“单击”，clearInterval（sInterval））；
初始化（）；
}

clearInterval（）的参数实际上不是“传递给

setInterval（）的函数”

，而是“对setInterval（）的相应调用返回的ID”

试着这样做：

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

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

函数

setInterval（cb，interval[，args]）

接受3个参数并返回您设置的间隔ID。此ID用于在必要时使用

clearInterval（ID）

函数清除间隔。因此，您的代码应该类似于->

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

const id = setInterval(startStopWatch, 1000);

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

哦，我现在明白了。这也是为什么我不能将setInterval（）函数直接放入addEventListener，而是需要分配一个函数来包装setInterval（）函数

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

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

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

const id = setInterval(startStopWatch, 1000);

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