Paggamit ng Elective Course

Rekomendasyon ng Kurso:

setInterval() Window setInterval() Method

setInterval() Definisyon at Paggamit clearInterval() Ang paraan ay magpapatugtug sa function ng bawat panahon ng itinakdang intervalo (sa mga milyesekundo).

O isinara ang bintana.Komento:

1 segundo = 1000 milyesekundo.

Mga paalala: setTimeout() Para maisagawa ang function ng isang beses lamang, gamitin ang

Para alisin ang interval, gamitin ang setInterval() Id na ibabalik:

myInterval = setInterval(function, milliseconds);

Pagkatapos nito, maaari mong mapatigil sa pamamagitan ng pagtawag sa clearInterval() Para mapatigil ang pagpapatugtugin:

clearInterval(myInterval);

Para sa iba pang pagkakatuturo:

clearInterval() Method

setTimeout() Method

clearTimeout() Method

Mga halimbawa

Halimbawa 1

Ipalabas ang "Hello" bawat segundo (1000 milyesekundo):

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

Subukan Ang Sarili

Halimbawa 2

Tutukoy ang displayHello bawat segundo:

setInterval(displayHello, 1000);

Subukan Ang Sarili

Mayroon pang mas maraming halimbawa sa ibaba ng pahina.

Gramata

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

Argumento

Argumento Paglalarawan
function Hindi puwedeng wala. Ang function na dapat maisagawa.
milliseconds

Hindi puwedeng wala. Ang intervalo ng epekto.

Kung ang halaga ay mas mababa sa 10, gamitin ang 10.
param1, param2, ...

Opisyal. Ang karagdagang argumento na ipapasa sa function.

Hindi sumusuporta ang IE9 at mas maaga na mga bersyon.

Halimbawa

Uri Paglalarawan
Bilang

ID ng timer.

Pakitungo ang id na ito sa clearInterval() Magkakasama upang alisin ang timer.

Sumusuporta ng browser

Lahat ng mga browser ay sumusuporta setInterval():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporta Suporta Suporta Suporta Suporta Suporta

Higit pang mga halimbawa

Halimbawa 3

Ipakita ang oras katulad ng digital clock:

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

Subukan Ang Sarili

Halimbawa 4

Istop ang digital clock gamit ang clearInterval():

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

Subukan Ang Sarili

Halimbawa 5

Gumawa ng dynamic progress bar gamit ang setInterval() at clearInterval():

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  let id = setInterval(frame, 10);
  function frame() {
    kung width == 100 {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

Subukan Ang Sarili

Halimbawa 6

Magpalit sa dalawang kulay ng background bawat 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);
}

Subukan Ang Sarili

Halimbawa 7

Ipagkakaloob ang argumento sa function (hindi gumagana sa IE9 at mas maaga na):

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

Subukan Ang Sarili

Gayunman, kung gamit mo ang anonymous function, magagamit sa lahat ng browser:

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

Subukan Ang Sarili