Window setInterval() method

Definition and Usage

setInterval() method calls the function at a specified time interval (in milliseconds).

setInterval() The method periodically calls the function until clearInterval() or close the window.

Note:1 second = 1000 milliseconds.

Note

To execute the function only once, use setTimeout() method.

To clear the interval, use setInterval() The returned id:

myInterval = setInterval(function, milliseconds);

Then you can stop the execution by calling clearInterval() to stop execution:

clearInterval(myInterval);

See also:

clearInterval() method

setTimeout() method

clearTimeout() method

Examples

Example 1

Display "Hello" every second (1000 milliseconds):

setInterval(function () {element.innerHTML += "Hello"}, 1000);

Try It Yourself

Example 2

Call displayHello once per second:

setInterval(displayHello, 1000);

Try It Yourself

More examples are provided below the page.

Syntax

setInterval(function, milliseconds, param1, param2, ...)

Parameters

Parameters Description
function Required. The function to be executed
milliseconds

Required. Execution interval.

If the value is less than 10, use 10.
param1, param2, ...

Optional. Additional parameters passed to the function.

IE9 and earlier versions do not support.

Return value

Type Description
Number

Timer ID.

Please associate this id with clearInterval() Used together to cancel the timer.

Browser support

All browsers support setInterval():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supports Supports Supports Supports Supports Supports

More examples

Example 3

Display time like a stopwatch:

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

Try It Yourself

Example 4

Stop the stopwatch using clearInterval():

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 5

Create a dynamic progress bar using setInterval() and clearInterval():

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 6

Switch between two background colors 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 7

Pass parameters to the function (does not work in IE9 and earlier versions):

setInterval(myFunc, 2000, "param1", "param2");

Try It Yourself

However, if you use an anonymous function, it is applicable to all browsers:

setInterval(function() {myFunc("param1", "param2")}, 2000);

Try It Yourself