Mesélj az eseményhurkról (event loop).

Az eseményciklus a JavaScript aszinkron működésének alapja. Felügyeli a kód végrehajtását, az események kezelését és a külső világgal való interakciót.

Fő komponensek:

• Heap (Heap): Memóriaterület objektumok kiosztására.
• Stack (Verem): A hely, ahol a függvények végrehajtási kontextusai tárolódnak. Függvény hívásakor a verembe kerül, és befejezéskor eltávolításra kerül.
• Web API-k: A böngésző által biztosított interfészek (DOM, AJAX, Timers stb.). Aszinkron műveleteket kezelnek.
• Callback sor (Callback Queue): Üzenetsor, amely eseményekhez kapcsolódó callback-eket tartalmaz. A Web API-k ide helyezik a befejezett aszinkron műveletek callback-jeit.
• Eseményciklus (Event Loop): Folyamatosan figyeli a veremet és a callback sort. Ha a verem üres, kiválasztja az első callback-et a sorból, és a végrehajtáshoz a verembe helyezi.

Folyamat:

1. A szinkron kód a veremben fut.
2. Az aszinkron műveletek (setTimeout, fetch) a Web API-khoz kerülnek.
3. Amikor egy aszinkron művelet befejeződik, callback-je a callback sorba kerül.
4. Az eseményciklus vár, amíg a verem ki nem ürül.
5. Amikor a verem üres, az eseményciklus kiválasztja az első callback-et a sorból, és a verembe helyezi, ahol végrehajtódik.

Példa a setTimeout-tal:

console.log('Kezdet');

setTimeout(() => {
  console.log('A setTimeout belseje');
}, 0);

console.log('Vége');

Az eredmény:

Kezdet
Vége
A setTimeout belseje

Bár a timeout 0 ms, a setTimeout callbackja a szinkron kód után fut le, mert a sorba kerül, és várja, hogy a verem kiürüljön.

A Node.js-ben is létezik eseményciklus, de néhány különbséggel a sorok kezelésének fázisaiban.