JavaScript stopwatch SetInterval ignoring ClearInterval

Question

I am making a stop watch and the setInterval seems to be restarting on it's own after I tell it to stop or it doesn't stop at all.

What I want is that when I press Stop the setInterval stops cycling but keeping the number it's at unless the reset button is clicked.

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()` returns a timer ID that you'll need to use in your `clearInterval` calls. — tex, Nov 25 '18 at 14:07

score 3 · Answer 1 · answered Nov 25 '18 at 14:12

clearInterval takes a timer ID, not a function. You're trying to call it with sw.stopWatch, which is a function.

Instead you need to save the ID returned by setInterval and pass that to 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>

score 0 · Accepted Answer · answered Nov 25 '18 at 14:11

you should save interval id for clear

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>

This worked brilliantly. So if I understand correctly, I would need two timers, one that is shown and one that is used by the function? — Upsetti_Spaghetti, Nov 25 '18 at 14:18

JavaScript stopwatch SetInterval ignoring ClearInterval

2 Answers2