JavaScript stopwatch SetInterval ignoring ClearInterval [duplicate]
0
This question already has an answer here:
Stop setInterval call in JavaScript
9 answers
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>javascript
asked Nov 25 '18 at 14:03
workstation293workstation293
63
marked as duplicate by Patrick Hund, Community♦ Nov 25 '18 at 14:22
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
0
This question already has an answer here:
Stop setInterval call in JavaScript
9 answers
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>javascript
asked Nov 25 '18 at 14:03
workstation293workstation293
63
marked as duplicate by Patrick Hund, Community♦ Nov 25 '18 at 14:22
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
setInterval()returns a timer ID that you'll need to use in yourclearIntervalcalls.
– Tex
Nov 25 '18 at 14:07
add a comment |
0
0
0
This question already has an answer here:
Stop setInterval call in JavaScript
9 answers
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>javascript
asked Nov 25 '18 at 14:03
workstation293workstation293
63
This question already has an answer here:
Stop setInterval call in JavaScript
9 answers
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>This question already has an answer here:
Stop setInterval call in JavaScript
9 answers
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>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>javascript
javascript
asked Nov 25 '18 at 14:03
workstation293workstation293
63
asked Nov 25 '18 at 14:03
workstation293workstation293
63
asked Nov 25 '18 at 14:03
workstation293workstation293
63
asked Nov 25 '18 at 14:03
workstation293workstation293
63
asked Nov 25 '18 at 14:03
workstation293workstation293
63
63
marked as duplicate by Patrick Hund, Community♦ Nov 25 '18 at 14:22
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Patrick Hund, Community♦ Nov 25 '18 at 14:22
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
setInterval()returns a timer ID that you'll need to use in yourclearIntervalcalls.
– Tex
Nov 25 '18 at 14:07
add a comment |
1
setInterval()returns a timer ID that you'll need to use in yourclearIntervalcalls.
– Tex
Nov 25 '18 at 14:07
1
1
setInterval() returns a timer ID that you'll need to use in your clearInterval calls.– Tex
Nov 25 '18 at 14:07
setInterval() returns a timer ID that you'll need to use in your clearInterval calls.– Tex
Nov 25 '18 at 14:07
add a comment |
2 Answers
2
active
oldest
votes
0
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>answered Nov 25 '18 at 14:11
EK LYEK LY
2715
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?
– workstation293
Nov 25 '18 at 14:18
add a comment |
3
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>answered Nov 25 '18 at 14:12
melpomenemelpomene
61.7k54994
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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>answered Nov 25 '18 at 14:11
EK LYEK LY
2715
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?
– workstation293
Nov 25 '18 at 14:18
add a comment |
0
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>answered Nov 25 '18 at 14:11
EK LYEK LY
2715
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?
– workstation293
Nov 25 '18 at 14:18
add a comment |
0
0
0
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>answered Nov 25 '18 at 14:11
EK LYEK LY
2715
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>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>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>answered Nov 25 '18 at 14:11
EK LYEK LY
2715
answered Nov 25 '18 at 14:11
EK LYEK LY
2715
answered Nov 25 '18 at 14:11
EK LYEK LY
2715
answered Nov 25 '18 at 14:11
EK LYEK LY
2715
2715
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?
– workstation293
Nov 25 '18 at 14:18
add a comment |
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?
– workstation293
Nov 25 '18 at 14:18
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?
– workstation293
Nov 25 '18 at 14:18
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?
– workstation293
Nov 25 '18 at 14:18
add a comment |
3
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>answered Nov 25 '18 at 14:12
melpomenemelpomene
61.7k54994
add a comment |
3
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>answered Nov 25 '18 at 14:12
melpomenemelpomene
61.7k54994
add a comment |
3
3
3
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>answered Nov 25 '18 at 14:12
melpomenemelpomene
61.7k54994
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>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>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>answered Nov 25 '18 at 14:12
melpomenemelpomene
61.7k54994
answered Nov 25 '18 at 14:12
melpomenemelpomene
61.7k54994
answered Nov 25 '18 at 14:12
melpomenemelpomene
61.7k54994
answered Nov 25 '18 at 14:12
melpomenemelpomene
61.7k54994
61.7k54994
add a comment |
add a comment |
1
setInterval()returns a timer ID that you'll need to use in yourclearIntervalcalls.– Tex
Nov 25 '18 at 14:07