Kuidas töötab sündmuste tsükkel (event loop)…

Sündmuste tsükkel JavaScriptis (veebibrauseri kontekstis) on mehhanism, mis võimaldab täita asünkroonseid operatsioone ilma peamise voolu blokeerimata. See koosneb mitmest komponendist:

Heap (Heap): Mälu piirkond, kus hoitakse objekte.
Call Stack (Kutsumisstakk): Andmestruktuur LIFO põhimõttel, jälgib sünkrooniliste funktsioonide täitmist.
Web API (Web API-d): Brauseri poolt pakutud (DOM, AJAX, setTimeout, setInterval, Event Listeners jms). Need ei kuulu JavaScripti mootorisse.
Callback Queue (Tagasikutsumise järjekord): Sõnumite järjekord asünkroonsete ülesannete täitmiseks.
Microtask Queue (Mikroülesannete järjekord): Prioriteetne järjekord (Promise.then(), async/await, queueMicrotask). Täidetakse enne ülesannete järjekorda.
Event Loop (Sündmussilm): Kontrollib pidevalt kutsumisstakki ja järjekorda. Kui stakk on tühi, liigutab ta esimese mikroülesande täitja stakile. Kui mikroülesannete järjekord on tühi, liigutab ta esimese ülesande täitja stakile.

Protsess näeb välja järgmine:

Sünkroonne kood täidetakse ja funktsioonid asetatakse kutsumisstakki.
Kui ilmub asünkroonne operatsioon (näiteks setTimeout), see antakse vastavale Web API-le. Sünkroonne kood jätkub.
Web API täidab operatsiooni taustal.
Pärast asünkroonse operatsiooni lõppu asetatakse selle töötleja (callback) ülesannete järjekorda (tavaliste async operatsioonide jaoks) või mikroülesannete järjekorda (promiside jaoks).
Sündmussilm kontrollib pidevalt kutsumisstakki. Kui see on tühi:
- Kontrollib mikroülesannete järjekorda. Kui on töötlejaid, liigutab need täitmiseks stakile, kuni mikroülesannete järjekord ei ole tühi.
- Seejärel kontrollib ülesannete järjekorda. Kui on töötlejaid, liigutab esimese täitmiseks stakile.
See protsess kordub, võimaldades täita asünkroonseid operatsioone ilma blokeerimiseta.

Näide setTimeout-iga:

// See kood täidetakse kutsumisstakil
console.log('Start');

// setTimeout - Web API. Callback asetatakse ülesannete järjekorda 0ms pärast.
// Tegelik täitmine võib olla viibinud sündmussilma tõttu.
setTimeout(() => {
  console.log('Timeout');
}, 0);

// See kood täidetakse pärast setTimeout kutsumisstakil
console.log('End');

// Väljund:
// Start
// End
// Timeout

Näide promise-idega:

// Täidetakse kutsumisstakil
console.log('A');

// promise. then() callback asetatakse mikroülesannete järjekorda
Promise.resolve().then(() => {
  console.log('B');
});

// Täidetakse kutsumisstakil
console.log('C');

// Väljund:
// A
// C
// B

Täitmisaeg on: sünkrooniline kood ('A', 'C'), siis mikroülesannete järjekord ('B'), ja lõpuks ülesannete järjekord.

Kuidas töötab sündmuste tsükkel (event loop) veeb-API-s?