In questo tutorial imparerai a conoscere il metodo JavaScript setInterval () con l'aiuto di esempi.
In JavaScript, un blocco di codice può essere eseguito a intervalli di tempo specificati. Questi intervalli di tempo sono chiamati eventi di temporizzazione.
Esistono due metodi per eseguire il codice a intervalli specifici. Sono:
- setInterval ()
- setTimeout ()
In questo tutorial imparerai a conoscere il setInterval()metodo.
JavaScript setInterval ()
Il setInterval()metodo ripete un blocco di codice ad ogni dato evento di temporizzazione.
La sintassi comunemente usata di JavaScript setInterval è:
setInterval(function, milliseconds);
I suoi parametri sono:
- funzione - una funzione contenente un blocco di codice
- millisecondi : l'intervallo di tempo tra l'esecuzione della funzione
Il setInterval()metodo restituisce un intervalID che è un numero intero positivo.
Esempio 1: visualizzare un testo una volta ogni 1 secondo
// program to display a text using setInterval method function greet() ( console.log('Hello world'); ) setInterval(greet, 1000);
Produzione
Ciao mondo Ciao mondo Ciao mondo Ciao mondo Ciao mondo….
Nel programma precedente, il setInterval()metodo chiama la greet()funzione ogni 1000 millisecondi ( 1 secondo).
Quindi il programma visualizza il testo Hello world una volta ogni 1 secondo.
Nota : il setInterval()metodo è utile quando si desidera ripetere più volte un blocco di codice. Ad esempio, mostrare un messaggio a un intervallo fisso.
Esempio 2: visualizzazione dell'ora ogni 5 secondi
// program to display time every 5 seconds function showTime() ( // return new date and time let dateTime= new Date(); // return the time let time = dateTime.toLocaleTimeString(); console.log(time) ) let display = setInterval(showTime, 5000);
Produzione
"17:15:28" "17:15:33" "17:15:38"….
Il programma sopra mostra l'ora corrente una volta ogni 5 secondi.
new Date()fornisce la data e l'ora correnti. E toLocaleTimeString()restituisce l'ora corrente. Per ulteriori informazioni su data e ora, visita Data e ora JavaScript.
JavaScript clearInterval ()
Come hai visto nell'esempio sopra, il programma esegue un blocco di codice a ogni intervallo di tempo specificato. Se vuoi interrompere questa chiamata di funzione, puoi usare il clearInterval()metodo.
La sintassi del clearInterval()metodo è:
clearInterval(intervalID);
Qui, intervalIDè il valore di ritorno del setInterval()metodo.
Esempio 3: utilizzare il metodo clearInterval ()
// program to stop the setInterval() method after five times let count = 0; // function creation let interval = setInterval(function()( // increasing the count by 1 count += 1; // when count equals to 5, stop the function if(count === 5)( clearInterval(interval); ) // display the current time let dateTime= new Date(); let time = dateTime.toLocaleTimeString(); console.log(time); ), 2000);
Produzione
16:47:41 16:47:43 16:47:45 16:47:47 16:47:49
Nel programma sopra, il setInterval()metodo viene utilizzato per visualizzare l'ora corrente ogni 2 secondi. Il clearInterval()metodo interrompe la chiamata alla funzione dopo 5 volte.
Puoi anche passare argomenti aggiuntivi al setInterval()metodo. La sintassi è:
setInterval(function, milliseconds, parameter1,… .paramenterN);
Quando si passa parametri aggiuntivi per il setInterval()metodo, questi parametri ( parameter1, parameter2saranno passati al specificato, ecc) la funzione .
Per esempio,
// program to display a name function greet(name, lastName) ( console.log('Hello' + ' ' + name + ' ' + lastName); ) // passing argument to setInterval setInterval(greet, 1000, 'John', 'Doe');
Produzione
Ciao John Doe Ciao John Doe Ciao John Doe….
Nel programma precedente, due parametri Johne Doevengono passati al setInterval()metodo. Questi due parametri sono gli argomenti che verranno passati alla funzione (qui, greet()funzione) definita all'interno del setInterval()metodo.
Nota: se è necessario eseguire una funzione solo una volta, è meglio utilizzare il metodo setTimeout ().
