JavaScript秒表SetInterval忽略ClearInterval [重复]答案

【问题标题】：JavaScript stopwatch SetInterval ignoring ClearInterval [duplicate]JavaScript秒表SetInterval忽略ClearInterval [重复]
【发布时间】：2019-04-27 08:10:05
【问题描述】：

我正在制作秒表，但在我告诉它停止或根本不停止后，setInterval 似乎正在自行重新启动。

我想要的是，当我按下 Stop 时，setInterval 会停止循环，但会保持原来的数字，除非单击重置按钮。

const sw = {
    time: 0,
    reset: ()=>{
        clearInterval(sw.stopWatch)
        sw.time = 0
    },
    stop: ()=>{
        clearInterval(sw.stopWatch)
        console.log("stop")
    },
    stopWatch: ()=>{
        setInterval(function(){
            sw.time ++
            document.getElementById("time").innerHTML = sw.time
        }, 1000)
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="index.js"></script>
</head>
<body>
    <div id="time">0</div>
    <button onclick="sw.stopWatch()">Start</button>
    <button onclick="sw.stop()">Stop</button>
    <button onclick="sw.reset()">Reset</button>
    
</body>
</html>

【问题讨论】：

setInterval() 返回一个计时器 ID，您需要在 clearInterval 调用中使用它。

标签： javascript

【解决方案1】：

clearInterval 采用计时器 ID，而不是函数。您正在尝试使用 sw.stopWatch 调用它，这是一个函数。

您需要保存 setInterval 返回的 ID 并将其传递给 clearInterval：

const sw = {
    time: 0,
    reset: ()=>{
        clearInterval(sw.timerId)
        sw.time = 0
    },
    stop: ()=>{
        clearInterval(sw.timerId)
        console.log("stop")
    },
    stopWatch: ()=>{
        sw.timerId = setInterval(function(){
            sw.time ++
            document.getElementById("time").innerHTML = sw.time
        }, 1000)
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="index.js"></script>
</head>
<body>
    <div id="time">0</div>
    <button onclick="sw.stopWatch()">Start</button>
    <button onclick="sw.stop()">Stop</button>
    <button onclick="sw.reset()">Reset</button>
    
</body>
</html>

【讨论】：

【解决方案2】：

您应该保存间隔 id 以便清除

const sw = {
    intervalId: 0,
    time: 0,
    reset: ()=>{
        clearInterval(sw.intervalId)
        sw.time = 0
        document.getElementById("time").innerHTML = 0
    },
    stop: ()=>{
        clearInterval(sw.intervalId)
        console.log("stop")
    },
    stopWatch: ()=>{
        sw.intervalId = setInterval(function(){
            sw.time ++
            document.getElementById("time").innerHTML = sw.time
        }, 1000)
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="index.js"></script>
</head>
<body>
    <div id="time">0</div>
    <button onclick="sw.stopWatch()">Start</button>
    <button onclick="sw.stop()">Stop</button>
    <button onclick="sw.reset()">Reset</button>
    
</body>
</html>

【讨论】：

这非常有效。所以如果我理解正确的话，我需要两个计时器，一个是显示的，一个是函数使用的？