Window setInterval()
Examples
Display "Hello" every second (1000 milliseconds):
setInterval(function () {element.innerHTML += "Hello"}, 1000);
Try it Yourself »
Call displayHello every second:
setInterval(displayHello, 1000);
Try it Yourself »
More examples below.
Description
The setInterval() method calls a function at specified intervals (in milliseconds).
The setInterval() method continues calling the function until
clearInterval() is called, or the window is closed.
1 second = 1000 milliseconds.
Note
To execute the function only once, use the setTimeout() method instead.
To clear an interval, use the id returned from setInterval():
myInterval = setInterval(function, milliseconds);
Then you can to stop the execution by calling clearInterval():
clearInterval(myInterval);
See Also:
Syntax
setInterval(function, milliseconds, param1, param2, ...)
Parameters
| Parameter | Description |
| function | Required. The function to execute |
| milliseconds | Required. The execution interval. If the value is less than 10, 10 is used |
| param1, param2, ... | Optional. Additional parameters to pass to the function Not supported in IE9 and earlier. |
Return Value
| Type | Description |
| A number | The id of the timer. Use this id with clearInterval() to cancel the timer. |
More Examples
Example
Display the time like a digital watch:
setInterval(myTimer, 1000);
function myTimer()
{
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
Try it Yourself »
Example
Using clearInterval() to stop the digital watch:
const myInterval = setInterval(myTimer, 1000);
function myTimer() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction()
{
clearInterval(myInterval);
}
Try it Yourself »
Example
Using setInterval() and clearInterval() to create a dynamic progress bar:
function move() {
const element = document.getElementById("myBar");
let width = 0;
let id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
element.style.width = width + '%';
}
}
}
Try it Yourself »
Example
Toggle between two background colors once every 500 milliseconds:
const myInterval = setInterval(setColor, 500);
function setColor() {
let x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myInterval);
}
Try it Yourself »
Example
Pass parameters to the function (does not work in IE9 and earlier):
setInterval(myFunc, 2000, "param1", "param2");
Try it Yourself »
However, if you use an anonymous function it works in all browsers:
setInterval(function() {myFunc("param1", "param2")}, 2000);
Try it Yourself »
Browser Support
setInterval() is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |
