clearInterval() not working
Solution 1
setInterval
returns an ID which you then use to clear the interval.
var intervalId;
on.onclick = function() {
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(fontChange, 500);
};
off.onclick = function() {
clearInterval(intervalId);
};
Solution 2
The setInterval
function returns an integer value, which is the id of the "timer instance" that you've created.
It is this integer value that you need to pass to clearInterval
e.g:
var timerID = setInterval(fontChange,500);
and later
clearInterval(timerID);
Solution 3
You're using clearInterval incorrectly.
This is the proper use:
Set the timer with
var_name = setInterval(fontChange, 500);
and then
clearInterval(var_name);
Solution 4
i think you should do:
var myInterval
on.onclick = function() {
myInterval=setInterval(fontChange, 500);
};
off.onclick = function() {
clearInterval(myInterval);
};
Solution 5
The setInterval method returns an interval ID that you need to pass to clearInterval
in order to clear the interval. You're passing a function, which won't work. Here's an example of a working setInterval/clearInterval
var interval_id = setInterval(myMethod,500);
clearInterval(interval_id);
Related videos on Youtube
Matt Sanchez
Trying to get proficient using the MEAN stack (Mongo, Express, Angular, Node).
Updated on July 09, 2022Comments
-
Matt Sanchez almost 2 years
Possible Duplicate:
JS - How to clear interval after using setInterval()I have a function that changes the
font-family
of some text every 500 ms usingsetInterval
(I made it just to practice JavaScript.) The function is called by clicking on an "on" button and the interval is supposed to be cleared using a separate button, "off". However, the "off" button doesn't actually clear the interval, it just continues. I suspect that this has something to do with scope but I'm not sure how to write it any other way. Also, I don't want to do this with jQuery because, after all, I'm doing it to learn.<body> <p><span id="go" class="georgia">go</span> Italian</p> <p> <button id="on" type="button" value="turn on">turn on</button> <button id="off" type="button" value="turn off">turn off</button> </p> <script> var text = document.getElementById("go"); var on = document.getElementById("on"); var off = document.getElementById("off"); var fontChange = function() { switch(text.className) { case "georgia": text.className = "arial"; break; case "arial": text.className = "courierNew"; break; case "courierNew": text.className = "georgia"; break; } }; on.onclick = function() { setInterval(fontChange, 500); }; off.onclick = function() { clearInterval(fontChange); }; </script> </body>
-
Matt Sanchez about 11 yearsI did look at the MDN spec first but it didn't help me with the problem.
-
Samiul about 6 yearswindow.timer = setInterval(fontChange, 500); clearInterval(window.timer)
-
-
papo over 7 yearsthis is fine, but you'll run into another problem if you are using setInterval() (or setTimeout()) in a situation where it's possible to run it multiple time. If you'll click twice, you'll never clear the first setInterval(). You either need if(intervalId !== undefined) { intervalId = setInterval(... or make intervalId an Array if you want more setIntervals on each additional click