Window setInterval() metod

Definition och användning

setInterval() metoden anropas med en specificerad tidsinterval (i millisekunder).

setInterval() Metoden anropar funktionen periodiskt, tills clearInterval() eller stäng fönstret.

Kommentar:1 sekund = 1000 millisekunder.

anteckning

För att köra funktionen endast en gång, använd i stället setTimeout() metoden.

För att rensa intervallet, använd setInterval() återvärdet id:

myInterval = setInterval(function, milliseconds);

Därefter kan du genom att anropa clearInterval() för att stoppa exekveringen:

clearInterval(myInterval);

Se också:

clearInterval() metod

setTimeout() metod

clearTimeout() metod

exempel

Exempel 1

Visa "Hello" (1000 millisekunder) varje sekund:

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

Prova själv

Exempel 2

anropas en gång per sekund displayHello:

setInterval(displayHello, 1000);

Prova själv

mera exempel finns längre ner på sidan.

syntaks

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

parametrar

parametrar beskrivning
function obligatoriskt. Funktionen att utföra.
milliseconds

obligatoriskt. Exekveringsintervallet.

Om värdet är mindre än 10, använd 10.
param1, param2, ...

valfritt. Ytterligare parametrar som skickas till funktionen.

IE9 och tidigare versioner stöder inte.

återvärd

typ beskrivning
nummer

tidsintervallets ID.

Vänligen ange detta id tillsammans med clearInterval() använd tillsammans för att avbryta tidsintervallet.

webbläsarstöd

alla webbläsare stöder setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stödjer Stödjer Stödjer Stödjer Stödjer Stödjer

Mer exempel

Exempel 3

Visa tid som en klocka:

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

Prova själv

Exempel 4

Stoppa en klocka med clearInterval():

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

Prova själv

Exempel 5

Skapa en dynamisk statusbar med setInterval() och 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 + '%';
    }
  }
}

Prova själv

Exempel 6

Byt mellan två bakgrundsfärger varje 500 millisekunder:

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

Prova själv

Exempel 7

Överför parametrar till funktionen (fungerar inte i IE9 och tidigare versioner):

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

Prova själv

Men om du använder en anonym funktion, fungerar det för alla webbläsare:

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

Prova själv