Ispričaj mi o petlji događaja (event loop).

Циклус догађаја је основа асинхроног рада у JavaScript-у. Он управља извршавањем кода, обрадом догађаја и интеракцијом са спољним светом.

Главне компоненте:

• Heap (Хејп): Област меморије за доделу објеката.
• Stack (Стек): Место где се чувају контексти извршавања функција. При позиву функције, она се поставља у стек, а при завршетку уклања.
• Web API: Интерфејси које пружа прегледач (DOM, AJAX, Timers итд.). Обрађују асинхроне операције.
• Callback Queue (Ред за повратне позиве): Ред порука везаних за догађаје. Web API-ји овде стављају callback-ове завршених асинхроног операција.
• Циклус догађаја (Event Loop): Континуирано прати стек и ред callback-ова. Ако је стек празан, узима први callback из реда и ставља га у стек за извршавање.

Процес:

1. Синхронај код се извршава у стеку.
2. Асинхроне операције (setTimeout, fetch) се шаљу у Web API-је.
3. Када асинхрона операција заврши, њен callback се поставља у ред callback-ова.
4. Циклус догађаја чека да стек постане празан.
5. Када је стек празан, циклус узима први callback из реда и га ставља у стек, где се извршава.

Пример са setTimeout:

console.log('Почетак');

setTimeout(() => {
  console.log('Унутар setTimeout');
}, 0);

console.log('Крај');

Излаз ће бити:

Почетак
Крај
Унутар setTimeout

Иако је timeout 0 мс, callback setTimeout се извршава након синхроног кода јер улази у ред и чека испразњење стека.

У Node.js-у такође постоји циклус догађаја, али са неким разликама у фазама обраде редова.