Loop di eventi in JavaScript | Spiegato con esempi
Il contesto di esecuzione globale mantiene uno stack di tutte le funzioni eseguite, funziona sul comportamento "ultimo ad entrare, primo ad uscire". Considerando che l'ambiente API Web raccoglie le funzioni che fanno parte dell'API Web (chiamate API, chiamata AJAX, setTimeout () e altro) dallo stack di esecuzione e inizia a eseguirle nel proprio ambiente. Questo, a sua volta, consente allo stack di esecuzione di lavorare su qualcos'altro, implementando così un comportamento asincrono.
Quando l'API Web termina l'esecuzione della funzione, posiziona il risultato alla coda dell'evento. Ogni volta che lo stack di esecuzione è vuoto, il ciclo di eventi raccoglie la funzione nella coda degli eventi e la rimette nello stack di esecuzione. L'intero cerchio è noto come il Loop di eventi In JavaScript.
Prova questo semplice codice sequenziale:
funzione f2 ()console.log ("interno funzione f2");
console.log ("F2 è finito");
funzione f1 ()
console.log ("interno funzione f1");
f2 ();
console.log ("fine della funzione f1");
f1 ();
L'output di questo codice è come
Questo codice sembra questo nello stack di esecuzione:
Lo stack funziona in questo ordine:
- I suggerimenti entrano F1, ed esegue il comando per stampare "Funzione interna f1" e lo rimuove dallo stack
- Il puntatore vede la linea f2 () e va dentro il F2
- Il puntatore esegue "Funzione interna f2" e lo rimuove dallo stack
- Stampa le linee "F2 ha finito di lavorare" e le rimuove dallo stack
- Da F2 è fatto, ha rimosso il "f2 (); " dallo stack e ritorna a F1 Per eseguire la parte rimanente del F1 funzione
- Stampa la linea "Ending of Function F1" e la rimuove dallo stack
- Poiché non viene lasciato nessun comando f1 (), Il puntatore lo rimuove anche dallo stack.
Ora, che sai come funziona lo stack di esecuzione, puoi passare all'esempio del codice Async testando le seguenti righe di codice:
funzione f2 ()console.log ("interno funzione f2");
setTimeout (() =>
console.log ("F2 è finito");
, 3000);
funzione f1 ()
console.log ("interno funzione f1");
f2 ();
console.log ("fine della funzione f1");
f1 ();
Come puoi vedere, nella funzione f2 () Ora stiamo svolgendo un compito che richiede 3 secondi per finire. Quando il puntatore raggiunge questo setTimeout () Dichiarazione, lo inserisce all'interno dell'ambiente delle API Web e lo rimuove dallo stack di esecuzione.
Lo stack di esecuzione continuerà a lavorare sull'altra parte del codice mentre l'API Web aspetterà il setTimeout () Per finire come:
Dopodichè setTimeout () L'istruzione è stata spostata nell'ambiente API Web, lo stack di esecuzione sarà così:
Come puoi vedere, mentre l'API Web sta lavorando sulla funzione setTimeout, lo stack di esecuzione sta lavorando su altre istruzioni e rimuovendole dallo stack. Quando l'API Web finisce di lavorare su "setTimeout ()"Lo sposterà in coda dell'evento, mentre l'evento si aspetta che lo stack di esecuzione diventi vuoto.
Quando lo stack è vuoto, il ciclo di eventi sposterà il setTimeout risultato allo stack di esecuzione come:
Poi:
Ecco come funziona il ciclo di eventi, ecco perché ottieni il seguente output sulla tua console:
Con l'output di cui sopra, è possibile verificare l'esecuzione del loop dell'evento
Conclusione
IL Loop di eventi è una funzione che sposta le istruzioni in attesa di essere eseguite nello stack di esecuzione globale dalla coda degli eventi. Ogni volta che una funzione come setTimeout () deve essere eseguito contemporaneamente viene spostato dallo stack di esecuzione all'ambiente API Web. L'API Web funziona sull'istruzione mentre il JavaScript continua a eseguire altre parti del codice, una volta che l'API Web viene eseguita lavorando sull'istruzione, posiziona l'istruzione o la funzione nella coda degli eventi da dove viene spostata nello stack di esecuzione ogni volta che il Lo stack è vuoto. Tutto questo ciclo è noto come il Loop di eventi.