Event Loops in JavaScript | Forklart med eksempler

Event Loop er et JavaScript-konsept på avansert nivå, Event Loop er en funksjon av JavaScript som plasserer instruksjonene som venter i hendelseskøen til den globale utførelsesstabelen. Når du jobber med asynkron utførelse har du 3 forskjellige miljøer som kjører, som er nemlig: utførelsesstabel, web -API -er og hendelses/meldingskø som du kan se på bildet nedenfor:

Den globale utførelseskonteksten opprettholder en stabel av alle funksjonene som blir utført, den fungerer på atferden ”sist i første ut”. Mens Web API -miljøet plukker opp funksjonene som er en del av Web API (API -anrop, Ajax Call, Settimeout () og mer) fra utførelsesstabelen og begynner å utføre dem i sitt eget miljø. Dette slik at utførelsesbunken kan jobbe med noe annet, og dermed implementere en asynkron oppførsel.

Når Web API er ferdig med å utføre funksjonen, plasserer den resultatet på hendelseskøen. Hver gang utførelsesbunken er tom, henter hendelsessløyfen funksjonen i hendelseskøen og plasserer den tilbake i utførelsesbunken. Hele denne sirkelen er kjent som Hendelsesløkker I JavaScript.

Prøv denne enkle sekvensielle koden:

funksjon f2 ()
konsoll.Logg ("Inside Function F2");
konsoll.Log ("F2 er ferdig");

funksjon f1 ()
konsoll.Logg ("Inside Function F1");
f2 ();
konsoll.Logg ("Ending of Function F1");

f1 ();

Utgangen til denne koden er som

Denne koden ser slik ut på utførelsesbunken:

Stabelen fungerer i denne rekkefølgen:

• Pekere går inn f1, og utfører kommandoen for å skrive ut “Inside Function F1” og fjerner den fra stabelen
• Pointer ser linjen f2 () og går inn i f2
• Pointer utfører “Inside Function F2” og fjerner den fra bunken
• Skriver ut linjene “F2 er ferdig med å jobbe” og fjerner den fra stabelen
• Siden f2 er ferdig, det fjernet “f2 (); ” fra stabelen og går tilbake til f1 å utføre den gjenværende delen av f1 funksjon
  
• Skriver ut linjen “Ending of Function F1” og fjerner den fra stabelen
• Siden ingen kommando er igjen i f1 (), pekeren fjerner den også fra stabelen.

Nå som du vet hvordan utførelsesbunken fungerer, kan du gå videre til ASYNC -kodeeksempel ved å teste ut følgende kodelinjer:

funksjon f2 ()
konsoll.Logg ("Inside Function F2");
setTimeout (() =>
konsoll.Log ("F2 er ferdig");
, 3000);

funksjon f1 ()
konsoll.Logg ("Inside Function F1");
f2 ();
konsoll.Logg ("Ending of Function F1");

f1 ();

Som du ser, i funksjon f2 () Vi gjør nå en oppgave som tar 3 sekunder å fullføre. Når pekeren når dette setTimeout () Uttalelse, den plasserer det inne i Web Apis -miljøet og fjerner det fra utførelsesstabelen.

Utførelsesbunken vil fortsette å jobbe med den andre delen av koden mens Web API vil vente på setTimeout () å fullføre som:

Etter dette setTimeout () Instruksjonen er flyttet til Web API -miljøet, utførelsesbunken vil se slik ut:

Som du kan se, mens Web API jobber med Settimeout -funksjonen, jobber utførelsesbunken med andre instruksjoner og fjerner dem fra stabelen. Når Web API er ferdig med å jobbe med “setTimeout ()”Den vil flytte den til arrangementskøen, mens arrangementet løkker venter på at utførelsesbunken skal bli tom.

Når stabelen er tom, vil hendelsessløyfen flytte Settimeout Resultat til utførelsesbunken som:

Og så:

Slik fungerer Event Loop, det er grunnen til at du får følgende utgang på konsollen din:

Med output ovenfor kan du bekrefte utførelsen av hendelsessløyfen

Konklusjon

De Event Loop er en funksjon som flytter instruksjonene som venter på å bli utført inn i den globale utførelsesbunken fra hendelseskøen. Hver gang en funksjon som setTimeout () må utføres samtidig som den flyttes fra utførelsesbunken til Web API -miljøet. Web API jobber med instruksjonen mens JavaScript fortsetter å utføre andre deler av koden, når Web API er ferdig med å jobbe med instruksjonen, plasserer den instruksjonen eller funksjonen i hendelseskøen der den flyttes til utførelsesbunken når Stabelen er tom. Hele denne syklus er kjent som Event Loop.