In questo tutorial imparerai a conoscere il metodo JavaScript setTimeout () con l'aiuto di esempi.
Il setTimeout()metodo esegue un blocco di codice dopo il tempo specificato. Il metodo esegue il codice solo una volta.
La sintassi comunemente usata di JavaScript setTimeout è:
setTimeout(function, milliseconds);
I suoi parametri sono:
- funzione - una funzione contenente un blocco di codice
- millisecondi - il tempo dopo il quale la funzione viene eseguita
Il setTimeout()metodo restituisce un intervalID , che è un numero intero positivo.
Esempio 1: visualizzare un testo una volta dopo 3 secondi
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) setTimeout(greet, 3000); console.log('This message is shown first');
Produzione
Questo messaggio viene mostrato per primo Hello world
Nel programma precedente, il setTimeout()metodo chiama la greet()funzione dopo 3000 millisecondi ( 3 secondi).
Quindi, il programma visualizza il testo Hello world solo una volta dopo 3 secondi.
Nota : il setTimeout()metodo è utile quando si desidera eseguire un blocco di una volta dopo un po 'di tempo. Ad esempio, mostrare un messaggio a un utente dopo il tempo specificato.
Il setTimeout()metodo restituisce l'id dell'intervallo. Per esempio,
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) let intervalId = setTimeout(greet, 3000); console.log('Id: ' + intervalId);
Produzione
Id: 3 Hello world
Esempio 2: visualizzazione dell'ora ogni 3 secondi
// program to display time every 3 seconds function showTime() ( // return new date and time let dateTime= new Date(); // returns the current local time let time = dateTime.toLocaleTimeString(); console.log(time) // display the time after 3 seconds setTimeout(showTime, 3000); ) // calling the function showTime();
Produzione
17:45:39 17:45:43 17:45:47 17:45:50 …
Il programma di cui sopra visualizza l'ora ogni 3 secondi.
Il setTimeout()metodo chiama la funzione solo una volta dopo l'intervallo di tempo (qui 3 secondi).
Tuttavia, nel programma precedente, poiché la funzione chiama se stessa, il programma visualizza l'ora ogni 3 secondi.
Questo programma viene eseguito indefinitamente (fino a quando la memoria non si esaurisce).
Nota : se è necessario eseguire una funzione più volte, è meglio utilizzare il setInterval()metodo.
JavaScript clearTimeout ()
Come hai visto nell'esempio precedente, il programma esegue un blocco di codice dopo l'intervallo di tempo specificato. Se vuoi interrompere questa chiamata di funzione, puoi usare il clearTimeout()metodo.
La sintassi del clearTimeout()metodo è:
clearTimeout(intervalID);
Qui, intervalIDè il valore di ritorno del setTimeout()metodo.
Esempio 3: utilizzare il metodo clearTimeout ()
// program to stop the setTimeout() method let count = 0; // function creation function increaseCount()( // increasing the count by 1 count += 1; console.log(count) ) let id = setTimeout(increaseCount, 3000); // clearTimeout clearTimeout(id); console.log('setTimeout is stopped.');
Produzione
setTimeout viene interrotto.
Nel programma sopra, il setTimeout()metodo viene utilizzato per aumentare il valore di conteggio dopo 3 secondi. Tuttavia, il clearTimeout()metodo interrompe la chiamata alla funzione del setTimeout()metodo. Quindi, il valore di conteggio non viene aumentato.
Nota : generalmente si utilizza il clearTimeout()metodo quando è necessario annullare la setTimeout()chiamata al metodo prima che avvenga.
Puoi anche passare argomenti aggiuntivi al setTimeout()metodo. La sintassi è:
setTimeout(function, milliseconds, parameter1,… .paramenterN);
Quando si passa parametri aggiuntivi per il setTimeout()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 setTimeout setTimeout(greet, 1000, 'John', 'Doe');
Produzione
Ciao John Doe
Nel programma precedente, due parametri Johne Doevengono passati al setTimeout()metodo. Questi due parametri sono gli argomenti che verranno passati alla funzione (qui, greet()funzione) definita all'interno del setTimeout()metodo.
Lettura consigliata: JavaScript async () e await ()
