I metodi JavaScript SetInterval e SetTimeout spiegati

JavaScript è un linguaggio di programmazione Web di alto livello in cui ogni dichiarazione di codice viene eseguita per riga. Tuttavia, supponiamo di voler eseguire un codice o una funzione in una fase successiva (in futuro) e non immediatamente. Questo si chiama pianificazione di una chiamata in JavaScript e può essere raggiunto con i due metodi integrati; setTimeout () E setInterval ().

Questo post discute cosa setInterval () E setTimeout () I metodi integrati sono in JavaScript. Tuttavia, prima di andare oltre, si dovrebbe notare che questi due metodi non fanno parte delle specifiche JavaScript e fanno parte delle specifiche standard HTML ma sono supportati in tutti i principali browser.

Qual è il metodo setTimeout ()?

IL setTimeout () Il metodo viene utilizzato per eseguire un codice specifico in futuro e non immediatamente chiamando una funzione di callback dopo un intervallo di tempo specifico. La funzione di callback è definita come la funzione fornita a un'altra funzione come argomento ed eseguita nella funzione esterna in seguito.

Sintassi del metodo setTimeout ()

IL sintassi Di setTimeout () è riportato di seguito:

setTimeout (callbackFunc, millisecondi);

Il primo argomento che diamo al setTimeout () Il metodo è la funzione di callback che viene eseguita dopo i millisecondi forniti.

Esempio
Facciamo un esempio in cui imposteremo il setTimeout () Metodo su un pulsante e quando l'utente fa clic su quel pulsante, le funzioni di callback verranno eseguite dopo 2 secondi:

Provalo

Nella funzione di callback, abbiamo inizializzato un avviso che verrà visualizzato dopo due secondi con il messaggio Ciao.

Qual è il metodo setInterval ()?

IL setInterval () Il metodo è lo stesso di setTimeout () poiché esegue anche una funzione di callback dopo un tempo specifico, ma con l'eccezione che esegue la funzione di callback continuamente dopo quell'intervallo di tempo specifico.

Sintassi del metodo setInterval ()

IL sintassi del setInterval () Il metodo è il seguente:

setInterval (myfunc, milliseconds);

Come setTimeout () Il primo argomento è la funzione di callback che verrà eseguita dopo il numero specificato di millisecondi e l'esecuzione verrà ripetuta continuamente dopo questo tempo specifico.

Esempio
Facciamo un esempio in cui mostreremo il tempo di sistema attuale dopo ogni 1 secondo.

const myfunc = () =>
const d = new Date ();
console.registro (d.tolocaletimestring ());

setInterval (MyFunc, 1000);

Nel codice sopra, abbiamo prima creato una funzione in cui abbiamo creato una nuova data usando il Data Oggetto e console hanno registrato il tempo di sistema.

Dopo aver definito la funzione, abbiamo usato il setInterval () Metodo, passato il nome della funzione e 1000 millisecondi che è di 1 secondo. Ora la funzione verrà eseguita dopo ogni 1 secondo e vedremo il nostro tempo di sistema nel registro della console dopo ogni secondo:

Execution Stoppage di setTimeout () e setInterval ()

Se non vuoi la funzione di callback di setInterval () O setTimeout () Per eseguire più, possiamo usare i metodi di arresto disponibili in JavaScript per entrambi.

Metodo Cleartimeout ()
Per fermare l'esecuzione del setTimeout () funzione che possiamo usare il Cleartimeout () metodo che prenderà una variabile/ID che viene restituita da setTimeout () Metodo come argomento.

Esempio
In questo esempio, fermeremo l'esecuzione della funzione di richiamata definita con il metodo setTimeout ():

Provalo
Fermare

Il codice sopra mostrato è una forma estesa dell'esempio setTimeout () mostrato in precedenza. In questo codice, abbiamo aggiunto un altro pulsante con il nome di Fermare e invocato la funzione stop () ogni volta che un utente fa clic sul pulsante STOP. La funzione stop () ha cleartimeout () che ha una variabile t come argomento. La variabile T è semplicemente un ID restituito dalla funzione setTimeout ().

Quando un utente fa clic su Tentativo pulsante IT quindi dopo tre secondi vediamo Ciao in allerta come visto in precedenza. Tuttavia, se l'utente ora fa clic sul pulsante di arresto prima di 3 secondi, la funzione di richiamo MyFunction non verrà invocata e quindi non vedremo un avviso. Questo fenomeno è mostrato di seguito:

Metodo ClearInterval ()
Allo stesso modo, per fermare l'esecuzione del setInterval () funzione, possiamo usare il ClearInterval () metodo che prenderà anche la variabile restituita da setInterval () come argomento.

Esempio

Facciamo un esempio in cui fermeremo l'esecuzione della funzione di callback del setInterval () metodo.

Tempo di stop

Nel codice sopra, abbiamo definito un pulsante nell'HTML e quindi inizializzato l'evento OnClick su questo pulsante. Quando l'utente fa clic sul pulsante definito, il setInterval () Il metodo smetterà di eseguire.

Quando abbiamo fatto clic sul pulsante "Stop Tempo", il tempo di sistema ha interrotto la visualizzazione sul nostro registro della console:

Conclusione

IL setTimeout () E setInterval () Metodi entrambi pianificano una chiamata che è eseguire una funzione in seguito dopo un numero specifico di millisecondi con l'eccezione che setInterval () esegue una funzione continuamente dopo quel tempo specifico, a differenza di setTimeout () Metodo che esegue una funzione solo una volta dopo il tempo specificato.

In questo post, abbiamo discusso di cosa setTimeout () E setInterval () Il metodo è e abbiamo visto i loro esempi insieme a screenshot dell'output. Alla fine, abbiamo anche visto come fermare l'esecuzione delle funzioni di callback associate setTimeout () E setInterval () metodi.