Easy Tutorial
❮ Prop Style Counterincrement Met Doc Open ❯

setInterval() Method

Window Object

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 the clearInterval() method.

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 IE 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 string to be executed, or a function.
milliseconds Required. The time interval between executions of the code/function, 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 pass to clearInterval(), clearTimeout() to cancel execution. | | --- | --- |


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, similar to a watch function):

var myVar = setInterval(function(){ myTimer() }, 1000);

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

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

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, if using an anonymous function, all browsers support it:

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

Window Object

❮ Prop Style Counterincrement Met Doc Open ❯