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.

Hint

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() Use together to cancel the timer.

Browser support

All browsers support setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

Meer voorbeelden

Voorbeeld 3

Toon de tijd zoals een klok:

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

Try it yourself

Voorbeeld 4

Stop de klok met 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

Voorbeeld 5

Maak een dynamische voortgangsbalk met setInterval() en 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

Voorbeeld 6

Wissel elke 500 milliseconden tussen twee achtergrondkleuren:

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

Voorbeeld 7

Geef parameters door aan de functie (werkt niet in IE9 en oudere versies):

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

Try it yourself

Maar als u een anonieme functie gebruikt, is het geschikt voor alle browsers:

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

Try it yourself