Event Loop w JavaScript

By /

JavaScript

Event Loop (pętla zdarzeń) to kluczowy koncept w JavaScript, który pozwala na obsługę operacji asynchronicznych, takich jak zdarzenia, wywołania zwrotne (callbacks) i obietnice (promises), w języku, który w swej naturze jest jednowątkowy. Dzięki Event Loop, JavaScript może obsługiwać wiele operacji, nie blokując głównego wątku wykonania. Jest to szczególnie ważne w kontekście aplikacji internetowych, gdzie płynność działania i reakcja na interakcje użytkownika są kluczowe.

Jak działa Event Loop

  1. Pętla zdarzeń sprawdza, czy stos (call stack) jest pusty. Jeśli tak, przenosi zadania z kolejki zdarzeń (event queue) do stosu.
  2. Kolejka zdarzeń jest obszarem, gdzie JavaScript przechowuje oczekujące zadania, które mają zostać wykonane po opróżnieniu stosu.
  3. Web APIs to asynchroniczne operacje przeglądarki, takie jak setTimeout, zdarzenia związane z DOM, czy zapytania AJAX, które są wykonywane niezależnie od głównego stosu.

Przykład działania Event Loop

Załóżmy, że chcemy zobaczyć w działaniu asynchroniczność JavaScript i jak Event Loop wpływa na wykonanie kodu. Poniżej znajduje się przykład z prostym kodem HTML i JavaScript, który to ilustruje:

<!DOCTYPE html>
<html>
<head>
    <title>Event Loop w JavaScript</title>
</head>
<body>
    <h3>Test Event Loop</h3>
    <button id="testButton">Kliknij mnie</button>
    
    <script>
        // Dodanie słuchacza zdarzeń do przycisku
        document.getElementById('testButton')
          .addEventListener('click', () => {
            console.log('Kliknięcie przycisku');

            // Asynchroniczne wywołanie setTimeout
            setTimeout(() => {
                console.log('Asynchroniczne zadanie');
            }, 2000);

            console.log('Koniec bloku słuchacza zdarzeń');
        });
    </script>
</body>
</html>

Opis działania kodu

  1. Po kliknięciu przycisku, wyświetlany jest komunikat “Kliknięcie przycisku”.
  2. Następnie, pomimo że setTimeout zostało wywołane, aby wykonać kod po 2 sekundach, natychmiast wyświetlany jest komunikat “Koniec bloku słuchacza zdarzeń”.
  3. Dopiero po upływie 2 sekund, po opróżnieniu stosu, Event Loop przenosi zadanie związane z setTimeout na stos i wyświetlany jest komunikat “Asynchroniczne zadanie”.

Podsumowanie

Event Loop w JavaScript jest fundamentem dla asynchronicznych operacji, umożliwiając jednowątkowemu językowi, jakim jest JavaScript, efektywne zarządzanie wieloma zadaniami. Dzięki Event Loop, aplikacje webowe mogą być responsywne i niezawodne, zapewniając płynną interakcję z użytkownikiem. Zrozumienie działania Event Loop jest kluczowe dla każdego programisty JavaScript, ponieważ pozwala na lepsze projektowanie struktury kodu i unikanie potencjalnych problemów związanych z asynchronicznością.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDevelopera w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top