4.1 Funzione setTimeout
I timer in JavaScript permettono di eseguire certe azioni dopo un determinato intervallo di tempo. I due metodi principali per lavorare con i timer sono setTimeout() e setInterval(). Si usano per eseguire il codice con un ritardo o a intervalli regolari.
Il metodo setTimeout() permette di eseguire una funzione una sola volta dopo un certo numero di millisecondi. Questo è utile per eseguire il codice con un ritardo.
Sintassi:
const timeoutID = setTimeout(callback, delay, ...args);
Dove:
callback: la funzione che verrà eseguitadelay: il ritardo in millisecondi prima di eseguire la funzioneargs: argomenti aggiuntivi che verranno passati alla funzionecallback
Esempio di utilizzo di setTimeout():
// Funzione che verrà eseguita dopo 2 secondi
function greet() {
console.log('Ciao, mondo!');
}
// Impostazione del timer
const timeoutID = setTimeout(greet, 2000);
4.2 Annullamento del timer setTimeout
Se hai bisogno di annullare l'esecuzione di una funzione pianificata con setTimeout(), puoi usare il metodo clearTimeout():
// Funzione che verrà eseguita dopo 2 secondi
function greet() {
console.log('Ciao, mondo!');
}
// Impostazione del timer
const timeoutID = setTimeout(greet, 2000);
// Annullamento del timer
clearTimeout(timeoutID);
Esempio con argomenti aggiuntivi:
// Funzione che verrà eseguita dopo 2 secondi con argomenti
function greet(name) {
console.log(`Ciao, ${name}!`);
}
// Impostazione del timer passando un argomento
const timeoutID = setTimeout(greet, 2000, 'Alice');
4.3 Funzione setInterval
Il metodo setInterval() permette di eseguire una funzione ripetutamente a intervalli di tempo specificati. È utile per l'esecuzione periodica del codice.
Sintassi:
const intervalID = setInterval(callback, delay, ...args);
Dove:
callback: la funzione che verrà eseguitadelay: l'intervallo in millisecondi tra le esecuzioni della funzioneargs: argomenti aggiuntivi che verranno passati alla funzionecallback
Esempio di utilizzo di setInterval:
// Funzione che verrà eseguita ogni 2 secondi
function greet() {
console.log('Ciao, mondo!');
}
// Impostazione dell'intervallo
const intervalID = setInterval(greet, 2000);
4.4 Annullamento dell'intervallo setInterval
Se hai bisogno di fermare l'esecuzione ripetuta di una funzione, puoi usare il metodo clearInterval().
// Funzione che verrà eseguita ogni 2 secondi
function greet() {
console.log('Ciao, mondo!');
}
// Impostazione dell'intervallo
const intervalID = setInterval(greet, 2000);
// Annullamento dell'intervallo dopo 10 secondi
setTimeout(() => {
clearInterval(intervalID);
console.log('Intervallo annullato');
}, 10000);
Esempio con argomenti aggiuntivi:
// Funzione che verrà eseguita ogni 2 secondi con argomenti
function greet(name) {
console.log(`Ciao, ${name}!`);
}
// Impostazione dell'intervallo passando un argomento
const intervalID = setInterval(greet, 2000, 'Alice');
4.5 Esempi pratici di utilizzo
Esempio 1: Aggiornamento automatico dell'orario
<!DOCTYPE html>
<html>
<head>
<title>Aggiornamento automatico dell'orario</title>
</head>
<body>
<h1>Ora Attuale</h1>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time').textContent = timeString;
}
// Aggiornamento dell'orario ogni secondo
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
Esempio 2: Richiesta periodica di dati
// Funzione per simulare una richiesta di dati
function fetchData() {
console.log('Recupero dei dati...');
// Qui è possibile eseguire una vera richiesta al server
}
// Esecuzione della richiesta ogni 10 secondi
const intervalID = setInterval(fetchData, 10000);
// Interruzione delle richieste dopo 1 minuto
setTimeout(() => {
clearInterval(intervalID);
console.log('Interruzione recupero dati');
}, 60000);
GO TO FULL VERSION