Eventi di temporizzazione JavaScript
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript può essere eseguito a intervalli di tempo. Questo è chiamato eventi temporali. |
Eventi temporali
L' windowoggetto consente l'esecuzione del codice a intervalli di tempo specificati.
Questi intervalli di tempo sono chiamati eventi temporali.
I due metodi chiave da utilizzare con JavaScript sono:
setTimeout(function, milliseconds)
Esegue una funzione, dopo aver atteso un numero specificato di millisecondi.setInterval(function, milliseconds)
Come setTimeout(), ma ripete continuamente l'esecuzione della funzione.
e setTimeout()sono setInterval()entrambi metodi dell'oggetto HTML DOM Window.
Il metodo setTimeout()
window.setTimeout(function, milliseconds);
Il window.setTimeout()metodo può essere scritto senza il prefisso della finestra.
Il primo parametro è una funzione da eseguire.
Il secondo parametro indica il numero di millisecondi prima dell'esecuzione.
Esempio
Fare clic su un pulsante. Attendi 3 secondi e la pagina avviserà "Ciao":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Come fermare l'esecuzione?
Il clearTimeout()metodo interrompe l'esecuzione della funzione specificata in setTimeout().
window.clearTimeout(timeoutVariable)
Il window.clearTimeout()metodo può essere scritto senza il prefisso della finestra.
Il clearTimeout()metodo utilizza la variabile restituita da setTimeout():
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Se la funzione non è già stata eseguita, è possibile interrompere l'esecuzione chiamando il clearTimeout()
metodo:
Esempio
Stesso esempio di sopra, ma con un pulsante "Stop" aggiunto:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Il metodo setInterval()
Il setInterval()metodo ripete una determinata funzione ad ogni dato intervallo di tempo.
window.setInterval(function, milliseconds);
Il window.setInterval()metodo può essere scritto senza il prefisso della finestra.
Il primo parametro è la funzione da eseguire.
Il secondo parametro indica la durata dell'intervallo di tempo tra ogni esecuzione.
Questo esempio esegue una funzione chiamata "myTimer" una volta al secondo (come un orologio digitale).
Esempio
Visualizza l'ora corrente:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Ci sono 1000 millisecondi in un secondo.
Come fermare l'esecuzione?
Il clearInterval()metodo interrompe le esecuzioni della funzione specificata nel metodo setInterval().
window.clearInterval(timerVariable)
Il window.clearInterval()metodo può essere scritto senza il prefisso della finestra.
Il clearInterval()metodo utilizza la variabile restituita da setInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Esempio
Stesso esempio del precedente, ma abbiamo aggiunto un pulsante "Stop time":
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>