Timer JavaScript

Le funzioni di temporizzazione sono quelle che ci permettono di eseguire una funzione in un momento specifico.

Utilizzando le funzioni di temporizzazione, è possibile ritardare l'esecuzione del codice per evitare di completare il codice esattamente nel momento in cui si verifica l'evento.

In JavaScript ci sono due funzioni di temporizzazione:

• setTimeout(function, milliseconds) -Attendere il numero specificato di millisecondi prima di eseguire la funzione (function)

• setInterval(function, milliseconds) - Come setTimeout(), ma esegue ripetutamente la funzione (function)

questisetTimeout()esetInterval()è il metodoL'oggetto finestra, può essere scritto senza il prefisso window.

Il metodo setTimeout()

setTimeout()Il metodo viene utilizzato per eseguire una funzione o un segmento di codice specificato dopo un periodo di tempo.

Sintassi:

window.setTimeout(function, milliseconds)

Il primo parametro è la funzione da eseguire.

Il secondo parametro indica il numero di millisecondi prima dell'esecuzione (1 secondo = 1000 millisecondi).

Esempio seguente che mostra un messaggio di avviso 2 secondi dopo aver cliccato sul pulsante:

<button onclick="setTimeout(myFunc, 2000)">Click</button>
<script>
function myFunc() {
　　alert("Hello World");
}
</script>

Ferma l'esecuzione del codice

clearTimeout()Il metodo ferma l'esecuzione della funzione specificata in setTimeout().

Sintassi:

window.clearTimeout(var)

clearTimeout()Il metodo utilizza la variabile restituita da setTimeout().

　　t = setTimeout();
　　clearTimeout(t);

Se la funzione non è stata eseguita, è possibile chiamareclearTimeout()metodo per fermare l'esecuzione.

Come nell'esempio sopra, ma con un pulsante “Ferma” aggiunto:

<button onclick="myFunc()">Click</button>
<button onclick="myStopFunc()">Stop the alert</button>
<script>
var t;
function myFunc() {
　　t = setTimeout(function() { alert("Hello world"); }, 2000);
}
function myStopFunc() {
　　clearTimeout(t);
}
</script>

Il metodo setInterval()

setInterval()Il metodo chiama ripetutamente una funzione con un intervallo di tempo fisso tra ciascuna chiamata.

Sintassi:

window.setInterval(function, milliseconds)

Il primo parametro è la funzione da eseguire.

Il secondo parametro indica la lunghezza dell'intervallo di tempo tra ogni esecuzione.

In questo esempio, la funzione chiamata 'startTimer' viene eseguita ogni secondo (come un orologio digitale):

//Esegui startTimer() ogni 1 secondo
setInterval(startTimer, 1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

Ferma l'esecuzione del codice

clearInterval()L'operazione del metodo si ferma all'esecuzione della funzione specificata in setInterval().

Sintassi:

window.clearInterval(var)

clearInterval()Il metodo utilizza la variabile restituita da setInterval().

　　t = setInterval();
　　clearInterval(t);

Come nell'esempio sopra, ma con un pulsante “Ferma” aggiunto:

//Esegui startTimer() ogni 1 secondo
var t = setInterval(startTimer, 1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}
//Annulla l'azione ripetuta creata con setInterval()
function stopTimer() {
　　　clearInterval(t);
}

Più esempi

Clicca sul pulsante “Inizia conteggio” sottostante per avviare il timer. Clicca sul pulsante “Ferma conteggio” per fermare il conteggio:

Clicca sul pulsante “Inizia progresso” sottostante per avviare la barra di progresso. Clicca sul pulsante “Ferma progresso” per fermare la barra di progresso: