Metodo setInterval() della finestra Window

Definizione e uso

setInterval() metodo chiama la funzione a intervalli di tempo specificati (in millisecondi).

setInterval() Il metodo chiama periodicamente la funzione fino a quando clearInterval() o chiudi la finestra.

Nota:1 secondo = 1000 millisecondi.

Suggerimento

Per eseguire la funzione una volta, utilizzare setTimeout() metodo.

Per cancellare l'intervallo, utilizzare setInterval() ID restituito:

myInterval = setInterval(function, milliseconds);

Poi puoi fermare l'esecuzione chiamando clearInterval() per fermare l'esecuzione:

clearInterval(myInterval);

Vedi anche:

Metodo clearInterval()

Metodo setTimeout()

Metodo clearInterval()

Esempio

Esempio 1

Visualizzazione "Hello" ogni secondo (1000 millisecondi):

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

Prova tu stesso

Esempio 2

Chiamata una volta al secondo displayHello:

setInterval(displayHello, 1000);

Prova tu stesso

Più esempi sono forniti nella parte inferiore della pagina.

Sintassi

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

Parametro

Parametro Descrizione
function Obbligatorio. Funzione da eseguire
milliseconds

Obbligatorio. Intervallo di esecuzione.

Se il valore è inferiore a 10, utilizzare 10.
param1, param2, ...

Opzionale. Parametri aggiuntivi passati alla funzione.

IE9 e versioni precedenti non supportano.

Valore di ritorno

Tipo Descrizione
Numero

ID del timer.

Si prega di assegnare questo id a clearInterval() Utilizzati insieme per annullare il timer.

Supporto del browser

Tutti i browser supportano setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporta Supporta Supporta Supporta Supporta Supporta

Più esempi

Esempio 3

Visualizzare l'ora come un orologio digitale:

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

Prova tu stesso

Esempio 4

Fermare l'orologio digitale utilizzando clearInterval():

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

Prova tu stesso

Esempio 5

Creare una barra di progresso dinamica utilizzando setInterval() e 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 tu stesso

Esempio 6

Cambia colore di sfondo tra due colori ogni 500 millisecondi:

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 tu stesso

Esempio 7

Passare i parametri alla funzione (non funziona in IE9 e versioni precedenti):

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

Prova tu stesso

Ma se si utilizza una funzione anonima, è compatibile con tutti i browser:

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

Prova tu stesso