JavaScript setInterval method evaluates an expression at specified intervals (in milliseconds). You need to clearInterval() method to stop the setInterval() method.
Note: 1000 ms = 1 second.
If you want to execute a function only once Then use the setTimeout() method.
Syntax
|
1 |
setInterval(function, milliseconds) |
Parameter Values
- function:- The function that will be executed
- milliseconds:- The intervals (in milliseconds) on how often to execute the code.
Examples of JavaScript setInterval Method
After every second a new “Hello” message will be displayed. You need to close the window to stop interval execution in this example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <p id="EHS"></p> <script> var myVar = setInterval(sTimer, 1000); function sTimer() { document.getElementById("EHS").innerHTML += "<p>Hello</p>"; } </script> </body> </html> |
Output:
How to JavaScript setInterval stop
Use clearInterval() method to stop setInterval(). setInterval() returns an interval ID, which you can pass to clearInterval():
|
1 2 3 4 |
var refreshIntervalId = setInterval(fname, 10000); /* later */ clearInterval(refreshIntervalId); |
JavaScript setInterval loop
How do I do it if I only want the function to be ran 10 times.
Simply, Just use a counter which increments each time the callback gets executed, and when it reaches your desired number of executions, use clearInterval() to kill the timer:
|
1 2 3 4 5 6 7 8 9 |
var counter = 0; var i = setInterval(function(){ // do your thing counter++; if(counter === 10) { clearInterval(i); } }, 200); |
Q: Can JavaScript setInterval stop itself?
Answer: As long as you have scope to the saved interval variable, you can cancel it from anywhere.
|
1 2 3 4 5 |
var myInterval = setInterval(function() { if (/* condition here */){ clearInterval(myInterval); } }, 50); |
Do comment if you have any doubts and suggestion on this tutorial.
Note: The All JS Examples codes are tested on the Safari browser (Version 12.0.2) and Chrome.
OS: macOS 10.14 Mojave
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.