setInterval()
Method
Example
Popup "Hello" every three seconds (3000 milliseconds):
setInterval(function(){ alert("Hello"); }, 3000);
Using a code string:
setInterval('alert("Hello");', 3000);
Definition and Usage
The setInterval()
method calls a function or evaluates an expression at specified intervals (in milliseconds).
The setInterval()
method will keep calling the function until clearInterval()
is called or the window is closed. The ID value returned by setInterval()
can be used as the parameter for clearInterval()
.
Tip: 1000 milliseconds = 1 second.
Tip: If you only want to execute the function once, use the setTimeout()
method.
Browser Support
The numbers in the table specify the first browser version that fully supports the method.
Method | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
setInterval() |
1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
Syntax
setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)
Parameter | Description |
---|---|
code/function | Required. The code to be called, or the function to be executed. |
milliseconds | Required. The time interval between executions, in milliseconds. |
param1, param2, ... | Optional. Additional parameters to pass to the function (not supported in IE9 and earlier). |
Technical Details
| Return Value: | Returns an ID (number) that can be used to cancel the execution with clearInterval()
or clearTimeout()
. |
| --- | --- |
More Examples
Example
You can call a named function to popup "Hello" every three seconds (3000 milliseconds):
var myVar;
function myFunction() {
myVar = setInterval(alertFunc, 3000);
}
function alertFunc() {
alert("Hello!");
}
Example
Display the current time (the setInterval()
method will execute the function every second, like a watch):
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
Example
Stop the execution of setInterval()
using clearInterval()
:
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar);
}
Example
Create a dynamic progress bar using setInterval()
and clearInterval()
:
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 + '%';
}
}
}
Example
Toggle the background color every 300 milliseconds:
var myVar = setInterval(function(){ setColor() }, 300);
function setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
clearInterval(myVar);
}
Example
Pass parameters to the alertFunc
function (not supported in IE9 and earlier):
var myVar;
function myStartFunction() {
myVar = setInterval(alertFunc, 2000, "tutorialpro", "Google");
}
However, using an anonymous function is supported by all browsers:
var myVar;
function myStartFunction() {
myVar = setInterval(function(){ alertFunc("tutorialpro", "Google"); }, 2000);
}
Related Pages
Window Object: clearInterval() Method
Window Object: setTimeout() Method
Window Object: clearTimeout() Method