In this blog post you’ll learn the javascript method that stops or clears the setInterval method from being executed. The method name is clearInterval().
clearInterval() Method.
Syntax:
JavaScript
clearInterval(variable name);
Variable name is variable in which the setInterval method is stored.
- variable name is required.
Description:
To stop the setInterval method from being execute you can use the JavaScript method which is clearInterval().
Store the setInterval method inside the variable. Then add that variable name inside the clearInterval() method (like this clearInterval(variable name)).
Example 1:
Let's show the numbers upto 10. After 10 we'll clear the interval.
JavaScript
// Print upto 10 numbers and clear the interval.
let i = 0;
let myinterval = setInterval(() => {
if(i == 10){
clearInterval(myinterval);
}
document.write(i++);
document.write("<br>");
}, 500); Example 2:
Stop the interval by clicking on button.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<title>clearTimeout Method | Maketechstuff.com</title>
</head>
<body>
<button type="button" class="stop_button">Click Here To Stop</button>
<p class="counter" style="font-size: 30px;"></p>
</body>
</html> JavaScript
let stop_button = document.querySelector(".stop_button");
let counter = document.querySelector(".counter");
let i = 0;
let myinterval = setInterval(() => {
counter.innerHTML = i++;
}, 500);
stop_button.addEventListener("click", stop_interval);
function stop_interval() {
clearInterval(myinterval);
}
Example 3:
Start and stop the counter by clicking on buttons.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<title>clearTimeout Method | Maketechstuff.com</title>
</head>
<body>
<button type="button" class="stop_button">Click Here To Stop</button>
<button type="button" class="start_button">Click Here To Start</button>
<p class="counter" style="font-size: 30px;"></p>
</body>
</html>
JavaScript
let stop_button = document.querySelector(".stop_button");
let start_button = document.querySelector(".start_button");
let counter = document.querySelector(".counter");
let i = 0;
// variable for setinterval method.
let myinterval;
setinterval_function();
function setinterval_function() {
// If function called more than one time by clicking on start_button. Its speed up the interval as the interval runs many times. So its better to clear the interval first and the start it again.
clearInterval(myinterval);
myinterval = setInterval(() => {
counter.innerHTML = i++;
}, 500);
}
stop_button.addEventListener("click", stop_interval);
start_button.addEventListener("click", start_interval);
function stop_interval() {
clearInterval(myinterval);
}
function start_interval() {
setinterval_function();
}
Blog posts in which I've used the clearInterval method.
Detects the button hold in JavaScript.
So that's it for the clearInterval() method. Its use to stop the execution of setInterval method. If you have any question or suggestion you can write in the comment section.
Share your thoughts.