Window setInterval() -menetelmä

Määritelmä ja käyttö

setInterval() menetelmä kutsuu funktiota määritetyn aikavälin (millisekunneissa) jälkeen.

setInterval() Menetelmä kutsuu funktiota periodisesti, kunnes clearInterval() tai sulje ikkuna.

Huomautus:1 sekunti = 1000 millisekuntia.

Hinnoittelu

Jos haluat suorittaa funktion vain kerran, käytä setTimeout() menetelmää.

Jos haluat tyhjentää intervalin, käytä setInterval() Palautettu id:

myInterval = setInterval(function, milliseconds);

Sitten voit kutsua clearInterval() Pysäytä suoritus:

clearInterval(myInterval);

Katso myös:

clearInterval() -menetelmä

setTimeout() -menetelmä

clearTimeout() -menetelmä

Esimerkki

Esimerkki 1

Näytetään "Hello" sekunnissa (1000 millisekunnissa):

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

Kokeile itse

Esimerkki 2

Kutsutaan displayHello sekunnissa:

setInterval(displayHello, 1000);

Kokeile itse

Lisää esimerkkejä sivun alalta.

Syntaksi

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

Muuttujat

Muuttujat Kuvaus
function Vakio. Suoritettava funktio
milliseconds

Vakio. Suoritettava väli.

Jos arvo on alle 10, käytä 10.
param1, param2, ...

Valinnainen. Funktiolle annetut lisäparametrit.

IE9 ja aikaisemmat versiot eivät tue.

Palautusarvo

Tyyppi Kuvaus
Luku

Aikamittarin ID.

Aseta tämä id clearInterval() Käytä yhdessä ajastimen perumiseen.

Selaimen tuki

Kaikki selaimet tukevat setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki Tuki

Lisää esimerkkejä

Esimerkki 3

Näytä aika kelloa kaltaisesti:

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

Kokeile itse

Esimerkki 4

Pysäytä kello käyttämällä clearInterval():

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

Kokeile itse

Esimerkki 5

Luo dynaaminen progress-baari käyttämällä setInterval() ja 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 + '%';
    }
  }
}

Kokeile itse

Esimerkki 6

Vaihda taustavärit kahdessa värisessä 500 millisekunnin välein:

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

Kokeile itse

Esimerkki 7

Lähetä parametrit funktiolle (ei toimi IE9 ja aikaisemmissa versioissa):

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

Kokeile itse

Mutta jos käytät nimetöntä funktiota, se on yhteensopiva kaikkien selaimien kanssa:

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

Kokeile itse