metoda setInterval() okna

definicja i użycie

setInterval() metoda wywołuje funkcję z określonymi odstępami czasu (w milisekundach).

setInterval() metoda cyklicznie wywołuje funkcję, aż do wywołania clearInterval() lub zamknąć okno.

komentarz:1 sekunda = 1000 milisekund.

uwaga

Aby wykonać funkcję tylko raz, użyj zamiast tego setTimeout() metoda.

Aby usunąć interval, użyj setInterval() zwrócony id:

myInterval = setInterval(function, milliseconds);

Następnie możesz wywołać clearInterval() aby zatrzymać wykonywanie:

clearInterval(myInterval);

patrz również:

metoda clearInterval()

metoda setTimeout()

metoda clearTimeout()

przykład

Przykład 1

wyświetlony co sekundę "Hello" (1000 milisekund):

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

Spróbuj sam

Przykład 2

wywoływany co sekundę displayHello:

setInterval(displayHello, 1000);

Spróbuj sam

Więcej przykładów znajduje się na dole strony.

syntaktyka

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

parametry

parametry opis
function wymagane. Funkcja do wykonania
milliseconds

wymagane. Przerwa do wykonania.

Jeśli wartość jest mniejsza niż 10, użyj 10.
param1, param2, ...

opcjonalnie. Dodatkowe parametry przekazywane do funkcji.

IE9 i wcześniejsze wersje nie obsługują.

zwracana wartość

typ opis
liczby

ID timera.

Proszę przypisać ten id do clearInterval() aby anulować timer.

obsługę przeglądarki

Wszystkie przeglądarki obsługują setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Obsługiwane Obsługiwane Obsługiwane Obsługiwane Obsługiwane Obsługiwane

Więcej przykładów

Przykład 3

Wyświetl czas jak zegar cyfrowy:

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

Spróbuj sam

Przykład 4

Zatrzymaj zegar cyfrowy za pomocą clearInterval():

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

Spróbuj sam

Przykład 5

Twórz dynamiczny paskowy postęp za pomocą setInterval() i 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 + '%';
    }
  }
}

Spróbuj sam

Przykład 6

Przełączaj między dwoma kolorami tła co 500 milisekund:

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

Spróbuj sam

Przykład 7

Przekazuj parametry do funkcji (nie działa w IE9 i wcześniejszych wersjach):

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

Spróbuj sam

Ale jeśli używasz anonimowej funkcji, to działa we wszystkich przeglądarkach:

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

Spróbuj sam