Window setInterval()Method

Window 对象参考手册Window Object

Examples

Pop up "Hello" every three seconds (3000 milliseconds):

setInterval(function(){ alert("Hello"); }, 3000);

Try it Yourself »

Use a code string:

setInterval('alert("Hello");', 3000);

Try it Yourself »

Definition and Usage

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

The setInterval() method will continue calling the function untilclearInterval()clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as the parameter of the clearInterval() method.

Tip:1000 milliseconds = 1 second.

Tip:If you only want to execute once, you can use thesetTimeout()method.


Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Method
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. A string of code to be executed, or a function.
milliseconds Required. The time interval (in milliseconds) between each execution or call of the code/function.
param1, param2, ... Optional. Additional parameters to pass to the function once executed (not supported in IE9 and earlier).

Technical Details

Return Value: Returns an ID (number). You can pass this ID to clearInterval() or clearTimeout() to cancel the execution.

More Examples

Example

You can pop up "Hello" every three seconds (3000 milliseconds) by calling a named function:

var myVar; function myFunction() { myVar = setInterval(alertFunc, 3000); } function alertFunc() { alert("Hello!"); }

Try it Yourself »

Example

Display the current time (the setInterval() method executes the function once every second, similar to a watch):

var myVar = setInterval(function(){ myTimer() }, 1000); function myTimer() { var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("demo").innerHTML = t; }

Try it Yourself »

Example

Use clearInterval() to stop the execution of setInterval:

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); }

Try it Yourself »

Example

Use setInterval() and clearInterval() to create a dynamic progress bar:

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 + '%'; } } }

Try it Yourself »

Example

Switch 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); }

Try it Yourself »

Example

Pass parameters to the alertFunc function (not supported in IE9 and earlier):

var myVar; function myStartFunction() { myVar = setInterval(alertFunc, 2000, "Example", "Google"); }

Try it Yourself »

However, if you use an anonymous function, it is supported in all browsers:

var myVar; function myStartFunction() { myVar = setInterval(function(){ alertFunc("Example", "Google"); }, 2000); }

Try it Yourself »


Related Pages

Window Object:clearInterval() Method

Window Object:setTimeout() Method

Window Object:clearTimeout() Method

Window 对象参考手册Window Object

Other Extensions