Pętle zdarzeń w JavaScript | Wyjaśniono przykładami

Event Loop to zaawansowana koncepcja JavaScript, pętla zdarzeń jest funkcją JavaScript, która nakłada instrukcje czekające w kolejce wydarzenia na globalnym stosie wykonania. Kiedy pracujesz z wykonaniem asynchronicznym, masz 3 różne środowiska, które są mianowicie: stos wykonania, interfejsy API i kolejki zdarzeń/wiadomości, które można zobaczyć na poniższym obrazku:

Globalny kontekst wykonania utrzymuje stos wszystkich wykonywanych funkcji, działa na zachowanie „Ostatni na pierwszym miejscu". Podczas gdy środowisko interfejsu API Web odbiera funkcje, które są częścią interfejsu API Web (połączenia API, wywołanie AJAX, Settimeout () i więcej) ze stosu wykonania i rozpoczyna ich wykonywanie we własnym środowisku. To z kolei pozwala stosowi wykonawcze działać nad czymś innym, wdrażając w ten sposób zachowanie asynchroniczne.

Kiedy interfejs API Web kończy wykonywanie funkcji, umieszcza wynik w kolejce zdarzenia. Ilekroć stos wykonania jest pusty, pętla zdarzeń podnosi funkcję w kolejce i umieszcza ją z powrotem do stosu wykonania. Ten cały krąg jest znany jako Pętle zdarzeń W JavaScript.

Wypróbuj ten prosty kod sekwencyjny:

funkcja f2 ()
konsola.log („Funkcja wewnątrz f2”);
konsola.Log („F2 się skończył”);

funkcja f1 ()
konsola.log („Funkcja wewnątrz f1”);
f2 ();
konsola.log („zakończenie funkcji f1”);

f1 ();

Wyjście tego kodu jest jako

Ten kod wygląda tak na stosie wykonania:

Stos działa w tej kolejności:

• Wchodzą wskaźniki f1, i wykonuje polecenie do wydrukowania „Funkcja wewnętrzna F1” i usuwa je ze stosu
• Wskaźnik widzi linię f2 () i wchodzi do środka f2
• Wskaźnik wykonuje „Funkcję wewnętrzną F2” i usuwa ją ze stosu
• Wydrukuje linie „F2 zakończyło działanie” i usuwa je ze stosu
• Od f2 jest gotowe, usunęło to „f2 (); ” ze stosu i wraca do f1 Aby wykonać pozostałą część f1 funkcjonować
  
• Wydrukuje wiersz „zakończenie funkcji F1” i usuwa ją ze stosu
• Ponieważ żadne polecenie nie jest pozostawione f1 (), wskaźnik usuwa go również ze stosu.

Teraz, że wiesz, jak działa stos wykonania, możesz przejść do przykładu kodu asynchronicznego, testując następujące wiersze kodu:

funkcja f2 ()
konsola.log („Funkcja wewnątrz f2”);
settimeout (() =>
konsola.Log („F2 się skończył”);
, 3000);

funkcja f1 ()
konsola.log („Funkcja wewnątrz f1”);
f2 ();
konsola.log („zakończenie funkcji f1”);

f1 ();

Jak widać, w funkcji f2 () Wykonujemy teraz zadanie, które zajmuje 3 sekundy. Kiedy wskaźnik do tego osiągnie settimeout () Instrukcja, umieszcza go w środowisku interfejsów API Web i usuwa ze stosu wykonania.

Stos wykonania będzie działał nad drugą częścią kodu, podczas gdy interfejs API Web będzie czekać na settimeout () skończyć jak:

Po tym settimeout () Instrukcja została przeniesiona do środowiska API Web, stos wykonania będzie wyglądał tak:

Jak widać, podczas gdy interfejs API Web pracuje nad funkcją Settimeout, stos wykonywania pracuje nad innymi instrukcjami i usuwa je ze stosu. Kiedy interfejs API internetowy kończy pracę nad „settimeout ()„Przeniesie go do kolejki wydarzeń, podczas gdy pętle wydarzeń czekają, aż stos wykonania stanie się pusty.

Gdy stos jest pusty, pętla zdarzeń przesunie Settimeout Wynik do stosu wykonania jako:

I wtedy:

Tak działa pętla zdarzeń, dlatego otrzymujesz następujące dane wyjściowe na konsoli:

Za pomocą powyższego wyjścia możesz zweryfikować wykonanie pętli zdarzenia

Wniosek

pętla zdarzeń jest funkcją, która przenosi instrukcje czekające na wykonanie globalnego stosu wykonania z kolejki zdarzenia. Ilekroć funkcja taka settimeout () musi być wykonywany jednocześnie przenoszony ze stosu wykonania do środowiska API Web API. Interfejs API Web działa na instrukcji, podczas gdy JavaScript nadal wykonuje inne części kodu, po zakończeniu interfejsu API Web Pracing nad instrukcją umieszcza instrukcję lub funkcję w kolejce zdarzenia, z którego jest przeniesiony do stosu wykonania, gdy tylko Stos jest pusty. To wszystko cykl jest znany jako Pętla zdarzeń.