Come ritardare/attendere nell'esecuzione del codice JavaScript?

Le funzioni che possono ritardare o fermare l'esecuzione di un pezzo di codice sono molto cruciali in un linguaggio di programmazione in quanto sono un modo per controllare il flusso del programma. Ce ne sono molti integrati "ritardo" O "Aspettare"Funzioni disponibili nella maggior parte dei linguaggi di programmazione. Ma in JavaScript, non vi è alcuna funzione di ritardo, attesa o sonno perché è un linguaggio di scripting e i linguaggi di script sono sempre sincroni e singoli.

Inizialmente, potrebbe non sembrare un grosso problema, ma man mano che progredisci nel mondo della programmazione realizzerai l'importanza delle funzioni di "ritardo" e "attesa". Quindi, se non c'è attesa \ ritardo \ sleep function, allora non c'è modo di controllare l'esecuzione di un programma in javascript? Bene, ci sono diverse funzioni e metodi che ci aiutano a raggiungere lo stesso compito in JavaScript.

Utilizzo della funzione setTimeout ()

Il primo e il metodo più comune nell'implementazione di un ritardo nell'esecuzione di un codice JavaScript è utilizzare il setTimeout () metodo. Farai un errore molto comune per assumere la sintassi:

setTimeout (ritardo in MS);

Mentre in realtà questo metodo prende una funzione di callback. Tenendo presente questo possiamo guardare la sintassi come:

Sintassi della funzione setTimeout ()

setTimeout (funzione, ritardo in MS);

Per comprendere meglio il funzionamento del setTimeout () Metodo, proviamo a risolvere un problema.

Esempio
Supponiamo che vogliamo stampare numeri da 1 a 10, con un ritardo di 1 secondo tra ogni numero.

Il modo tradizionale sarebbe:

per (let i = 1; i <=10 ; i++ )
setTimeout (1000);
console.log (i);

L'output del codice sta stampando istantaneamente tutte le 10 cifre come:

Perché non stiamo passando nulla al metodo setTimeout ().

Per aggiungere il ritardo usando il metodo setTimeout () pensiamo che il modo corretto sia:

per (let i = 1; i console.log (i), 1000);

Invece di ottenere un ritardo di 1 secondo dopo ogni numero, ciò che otteniamo è un ritardo di 1 secondo all'inizio e quindi tutti i numeri vengono stampati all'istante. Come mostrato di seguito:

Abbiamo avuto il ritardo iniziale, ma dopo nessun ritardo. Perchè è così? Bene, il modo in cui il setTimeout () funziona è che funziona sempre in modalità sincrona. Ciò significa che anche avere più chiamate alla stessa funzione comporterà il ritardo di 1 sec.

Quello che abbiamo fatto è stato, abbiamo invocato ciascuno setTimeout () metodo uno dopo l'altro e a causa della natura asincrona del setTimeout () metodo, non aspetta il precedente setTimeout () metodo per finire e quindi eseguire quello successivo.

Quindi alla fine abbiamo fatto 10 chiamate a setTimeout () Metodo che tutti hanno lo stesso tempo di ritardo. C'è un modo per risolvere questo problema, e cioè utilizzando un timer di ritardo crescente come:

setTimeout (() => console.log (i), 1000);
setTimeout (() => console.log (i), 2000);
setTimeout (() => console.log (i), 3000);

L'esempio di codice sopra di 10 numeri di stampa diventerebbe questo:

per (let i = 1; i console.log (i), i * 1000);

Stiamo usando il valore crescente della variabile "i" e moltiplicandola con il ritardo di 1 secondo per creare ritardi incrementali per ogni chiamata di setTimeout ()

L'output con questo diventa:

Finalmente l'abbiamo fatto. Ma c'è ancora qualcosa che non va qui. Questo è il fatto che il calcolo dei ritardi in questo modo è molto complicato soprattutto quando si lavora in un'applicazione del mondo reale. C'è un modo anche per questo, crea il tuo metodo di ritardo/attesa.

Come codificare la tua funzione di ritardo/attesa?

Vogliamo una soluzione migliore, ciò che possiamo fare è codificare la nostra "ritardo" metodo. Useremo il setTimeout () funzione e promette di aiutarci a creare il "ritardo"Metodo come:

Creeremo semplicemente una funzione con il nome di "ritardo" e passeremo il tempo in millisecondi. Questa funzione di "ritardo" restituisce una promessa e non lascerà andare avanti l'esecuzione fino a quando la promessa non viene risolta.

ritardo della funzione (ms)
restituire new Promise (resolve => setTimeout (resolve, MS));

Ora, chiamiamo questa funzione di "ritardo" con un ".Poi "Operatore. Come questo:

console.log ("ciao");
ritardo (2000).Quindi (() => console.Log ("World!"););

L'output sarebbe:

Stiamo creando una promessa e setTimeout () metodo con qualche ritardo a risolvere IL promettere. Puoi leggere di più sulle promesse di JavaScript.

Nel caso in cui tu voglia sbarazzarti del .Poi() Metodo, e per incatenare i ritardi, ciò che possiamo fare è usare asincrone E Aspetta con la nostra funzione "ritardo".

funzione asincrica demo ()
console.log ("questo è un");
Attendi il ritardo (1000);
console.log ("LinuxHint");
Attendi il ritardo (1000);
console.Log ("Tutorial!");

Nota: dobbiamo aggiungere il asincrone parola chiave con la funzione che chiama il ritardo() metodo. Se eseguiamo il programma ciò che otteniamo è questo:

Venendo al nostro problema, la stampante numerica da 1 a 10, dobbiamo crearla all'interno di una funzione asincrima e chiamare il metodo "ritardo" che abbiamo appena creato come:

funzione asincr NumerPrinter ()
per (let i = 1; i <= 10; i++)
console.log (i);
Aspetta il ritardo (1000)

E dobbiamo chiamare questa funzione con:

numerprinter ();

L'output che otteniamo con questo è:

Questo è tutto per la nostra funzione di "ritardo".

Conclusione

Non c'è integrazione Aspettare, ritardo, o funzione di sonno in JavaScript, ma possiamo usare il setTimeout () metodo per imitare il comportamento di ritardo e possiamo persino codificare il nostro ritardo() metodo per creare un ritardo nell'esecuzione del programma. Abbiamo imparato come setTimeout () il metodo funziona, come è comune fraintendere il suo lavoro e l'uso. Inoltre, abbiamo imparato a combinare il metodo setTimeout () con promesse Per creare il nostro metodo di ritardo e abbiamo anche imparato come utilizzare asincrone E Aspetta Nella nostra funzione per aspettare e quindi continuare l'esecuzione.