Pętla zdarzeń JavaScript: Asynchroniczne wykonanie bez blokowania

Pętla zdarzeń JavaScript zarządza operacjami asynchronicznymi, wykonując wywołania zwrotne z kolejki, gdy stos wywołań jest pusty, zapobiegając blokowaniu wątku.

Loop. Control structure repeating code until condition is met. Generated ELI5 content

        graph LR
  Center["Pętla zdarzeń JavaScript: Asynchroniczne wykonanie bez blokowania"]:::main
  Pre_variable["variable"]:::pre --> Center
  click Pre_variable "/terms/variable"
  Rel_iteration["iteration"]:::related -.-> Center
  click Rel_iteration "/terms/iteration"
  Rel_recursion["recursion"]:::related -.-> Center
  click Rel_recursion "/terms/recursion"
  Rel_closed_loop_life_support["closed-loop-life-support"]:::related -.-> Center
  click Rel_closed_loop_life_support "/terms/closed-loop-life-support"
  classDef main fill:#7c3aed,stroke:#8b5cf6,stroke-width:2px,color:white,font-weight:bold,rx:5,ry:5;
  classDef pre fill:#0f172a,stroke:#3b82f6,color:#94a3b8,rx:5,ry:5;
  classDef child fill:#0f172a,stroke:#10b981,color:#94a3b8,rx:5,ry:5;
  classDef related fill:#0f172a,stroke:#8b5cf6,stroke-dasharray: 5 5,color:#94a3b8,rx:5,ry:5;
  linkStyle default stroke:#4b5563,stroke-width:2px;

      

🧒 Wyjaśnij jak 5-latkowi

Wyobraź sobie [JavaScript](/pl/terms/javascript) jako kucharza, który może robić tylko jedną rzecz naraz. Jeśli musi upiec ciasto (długie zadanie), nie stoi i nie czeka. Wkłada ciasto do piekarnika i nastawia minutnik, a następnie natychmiast zaczyna przygotowywać sałatkę (inne zadanie). Kiedy dzwoni minutnik piekarnika, kucharz kończy sałatkę, wyjmuje ciasto, a następnie przechodzi do następnej czynności. Pętla zdarzeń jest jak system kucharza do zarządzania tymi 'czekającymi' zadaniami, zapewniając, że zostaną one obsłużone, gdy będą gotowe, bez zatrzymywania innej pracy.

🤓 Expert Deep Dive

Pętla zdarzeń JavaScript to model współbieżności, który koordynuje wykonywanie kodu, zadań i zdarzeń. Ciągle monitoruje stos wywołań i kolejkę (kolejki) zadań. Kod synchroniczny jest wykonywany bezpośrednio na stosie wywołań. Operacje asynchroniczne (np. setTimeout, Promises, I/O) są przekazywane do interfejsów API środowiska hosta, które zarządzają ich wykonaniem. Po zakończeniu operacji asynchronicznej jej wywołanie zwrotne (lub obsługujący ją handler Promise) jest umieszczane w odpowiedniej kolejce – kolejce zadań (dla makrozadań, takich jak setTimeout, zdarzenia DOM) lub kolejce mikrozadań (dla mikrozadań, takich jak Promises, queueMicrotask). Główną funkcją pętli zdarzeń jest pobieranie zadań z kolejki i ich wykonywanie, gdy stos wywołań jest pusty. Mikrozadania są zazwyczaj przetwarzane przed makrozadaniami. W szczególności, po zakończeniu bieżącego makrozadania i przed rozpoczęciem następnego, pętla zdarzeń wykona wszystkie dostępne mikrozadania. Priorytetyzuje to natychmiastowe wywołania zwrotne (takie jak rozwiązania Promise) nad odroczonymi, zapewniając responsywność i wydajne przetwarzanie operacji asynchronicznych w różnych środowiskach JavaScript.

🔗 Powiązane terminy

Wymagana wiedza:

📚 Źródła