The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Note: To be able to use the clearInterval() method, you must use a variable when creating the interval method:
myVar = setInterval("javascript function", milliseconds);
Then you will be able to stop the execution by calling the clearInterval() method.
clearInterval(myVar);
Syntax and Usage
clearInterval(var)
Parameter Values
Parameter Description var Required. The name of the timer returned by the setInterval() method
<h2 id="demo"></h2> <button class="btn btn-info" onclick="myStopFunction()">Stop time</button> <script> var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = t; } function myStopFunction() { clearInterval(myVar); } </script>
<button class="btn btn-info" onclick="move()">Click Me</button> <div id="myProgress"> <div id="myBar"></div> </div> <script> function move() { var elem = document.getElementById("myBar"); var width = 0; var id = setInterval(frame, 10); function frame() { if (width == 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } } </script>
<button class="btn btn-primary" onclick="stopColor()">Stop Toggling</button> <script> var myVar = setInterval(setColor, 300); function setColor() { var x = document.body; x.style.backgroundColor = x.style.backgroundColor == "green" ? "pink" : "green"; } function stopColor() { clearInterval(myVar); } </script>
<!DOCTYPE html> <html> <head> <title>How To Use Window ClearInterval Method In JavaScript</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <style> h1 { color: red; } #myProgress { width: 100%; height: 30px; position: relative; background-color: #ddd; } #myBar { background-color: #4CAF50; width: 10px; height: 30px; position: absolute; } </style> <body> <div class="container"> <br> <div class="text-center"> <h1>Use Window ClearInterval Method In JavaScript</h1> </div> <br> <div class="well"> <button class="btn btn-info" onclick="myStopFunction()">Stop time</button> <h2 id="demo1"></h2> <button class="btn btn-info" onclick="move()">Click Me</button> <br><br><br> <div id="myProgress"> <div id="myBar"></div> </div> </div> </body> </html> <button class="btn btn-info" onclick="move()">Click Me</button> <br><br><br> <div id="myProgress"> <div id="myBar"></div> </div> <script> var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("demo1").innerHTML = t; } function myStopFunction() { clearInterval(myVar); } function move() { var elem = document.getElementById("myBar"); var width = 0; var id = setInterval(frame, 10); function frame() { if (width == 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } } </script>