I Timer in una pagina Web

Metodi dell'oggetto window per gestire i Timer

Timer di window

Pubblicato il: 5-8-2019

Ultima Modifica: 14-12-2024

setTimeout e clearTimeout

In una pagina web mediante specifici metodi dell'oggetto window possiamo impostare dei timer che allo scadere di un tempo prestabilito eseguono una determinata funzione. I metodi in questioni sono quattro, i primi due che prenderò in considerazione sono setTimeout e clearTimeout. Al primo metodo setTimeout si devono passare due parametri, il primo è il nome della funzione che allo scadere del tempo prestabilito sarà eseguita e il secondo parametro è un valore che rappresenta il numero di millisecondi che devono passare prima che la funzione venga eseguita, naturalmente trattandosi di millisecondi se inseriamo 1000 significa un secondo. Questo metodo restituisce un valore numerico che rappresenta l'ID del timer che deve essere usato nel caso volessimo usare anche il secondo metodo clearTimeout per cancellare il timer prima che vada in funzione lanciando il codice da eseguire. Bisogna anche dire che questo particolare tipo di timer và in funzione solo una volta e quindi termina. Un esempio di codice possiamo vederlo qui sotto, copiandolo incollandolo e mandandolo in esecuzione in una pagina con estensione .html visualizzerà due pulsanti, uno per attivare il Timer e l'altro per annullarlo, attivandolo dopo 5 secondi mostrerà una finestra che informa che la funzione associata al Timer è stata eseguita.

Esempio di setTimeout e clearTimeout

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>setTimeout</title>
<script type="text/javascript">
var timer

function esegui(){
timer=window.setTimeout(messaggio, 5000);
}

function messaggio(){
window.alert("Timer eseguito");
}

function stop(){
window.clearTimeout(timer);
}


</script>
<style type="text/css">
.auto-style1 {
font-size: large;
}
</style>
</head>

<body>
<span class="auto-style1">Cliccando sul pulsante <strong>avvia Timer</strong> dopo 5 secondi verrà visualizzata una finestra.</span><br class="auto-style1">
<span class="auto-style1">Cliccando sul pulsante <strong>stop Timer</strong> il Timer verrà annullato.</span><br><br>
<button onclick="esegui()">avvia Timer</button><br><br>
<button onclick="stop()">stop Timer</button>
</body>

</html>

Come in precedenza ho detto il metodo setTimeout lancia ede esegue una funzione passata come parametro poi termina, cioè non viene più eseguita. Se vogliamo un Timer che esegua un metodo ad intervalli regolari senza mai terminare abbiamo a disposizione i metodi setInterval e clearInterval sempre dell'oggetto window, questi due metodi però non sono disponibili nei browser più vecchi. Vediamo allora adesso come superare il problema usando il metodo setTimeout.
L'esempio proposto sotto visualizza e incrementa un contatore ad intervalli di un secondo fino a quando non si arresta il Timer con il metodo clearTimeout.

Esempio di setTimeout e clearTimeout a ciclo continuo

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>setTimeout</title>
<script type="text/javascript">
var timer, count=0

function esegui(){
timer=window.setTimeout(contatore, 1000);
a1.disabled=true;
}

function contatore(){
idcount.innerText=count;
count++;
timer=window.setTimeout(contatore,1000)
}

function stop(){
a1.disabled=false;
window.clearTimeout(timer);
}


</script>
<style type="text/css">
.auto-style1 {
font-size: xx-large;
color: #F82323;
}
</style>
</head>

<body>
<p id="idcount" class="auto-style1">

<strong>Contatore</strong></p>
<button id="a1" onclick="esegui()">avvia Timer</button>           
<button onclick="stop()">stop Timer</button>
<br><br>
</body>

</html>

Come si può vedere all'interno della funzione contatore ho inserito la chiamata al medoto setTimeout che ogni volta riavvia il Timer fino a quando non viene arrestato con il metodo clearTimeout.

setInterval e clearInterval

Il metodo setInterval prende gli stessi parametri del metodo setTimeout, ma a differenza di questo esegue il Timer ad intervalli regolari fino a quando non lo si arresta con il metodo clearInterval, quindi possiamo vedere qui sotto lo stesso esempio precedente ma usando questi due nuovi metodi.

Esempio di setInterval e clearInterval

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>setInterval</title>
<script type="text/javascript">
var timer, count=0

function esegui(){
timer=window.setInterval(contatore, 1000);
a1.disabled=true;
}

function contatore(){
idcount.innerText=count;
count++;
}

function stop(){
a1.disabled=false;
window.clearInterval(timer);
}


</script>
<style type="text/css">
.auto-style1 {
font-size: xx-large;
color: #F82323;
}
</style>
</head>

<body>
<p id="idcount" class="auto-style1">

<strong>Contatore</strong></p>
<button id="a1" onclick="esegui()">avvia Timer</button>           
<button onclick="stop()">stop Timer</button>
<br><br>
</body>

</html>

Tutti tre gli esempi di questa pagina possono essere copiati ed incollati in una pagina del notepad, poi dopo averla chiusa si cambia l'estensione del file in .html e si fa doppio clic su di essa per mandarla in esecuzione.