Πώς λειτουργεί ο βρόχος γεγονότων (event loop) στο…

Ο βρόχος γεγονότων στην JavaScript (στο πλαίσιο του προγράμματος περιήγησης ιστού) είναι ένας μηχανισμός που επιτρέπει την εκτέλεση ασύγχρονων λειτουργιών χωρίς να μπλοκάρει το κύριο νήμα εκτέλεσης. Αποτελείται από αρκετά συστατικά:

Heap (Heap): Περιοχή μνήμης όπου αποθηκεύονται τα αντικείμενα.
Call Stack (Στοίβα κλήσεων): Δομή δεδομένων LIFO που παρακολουθεί την εκτέλεση των συγχρονων συναρτήσεων.
Web APIs: Παρέχονται από το πρόγραμμα περιήγησης (DOM, AJAX, setTimeout, setInterval, Event Listeners κ.λπ.). Δεν αποτελούν μέρος του κινητήρα JavaScript.
Callback Queue (Ουρά callback) / Task Queue (Ουρά εργασιών): Ουρά μηνυμάτων για την εκτέλεση ασύγχρονων εργασιών.
Microtask Queue (Ουρά μικροεργασιών): Προτεραιότητα ουρά για μικροεργασίες (Promise.then(), async/await, queueMicrotask). Εκτελείται πριν από την ουρά εργασιών.
Event Loop (Βρόχος γεγονότων): Ελέγχει συνεχώς τη στοίβα κλήσεων και την ουρά. Αν η στοίβα είναι άδεια, μεταφέρει τον πρώτο χειριστή από την ουρά μικροεργασιών στη στοίβα. Μετά την άδεια της ουράς μικροεργασιών, μεταφέρει τον πρώτο χειριστή από την ουρά εργασιών στη στοίβα.

Η διαδικασία λειτουργεί ως εξής:

Κώδικας συγχρονου τρέχει και οι συναρτήσεις τοποθετούνται στη στοίβα κλήσεων.
Όταν συναντάται μια ασύγχρονη λειτουργία (π.χ., setTimeout), μεταβιβάζεται στην αντίστοιχη Web API. Η εκτέλεση του συγχρονου κώδικα συνεχίζεται.
Η Web API εκτελεί την εργασία στο παρασκήνιο.
Μετά την ολοκλήρωση της ασύγχρονης λειτουργίας, ο χειριστής (callback) αυτής της λειτουργίας τοποθετείται στην ουρά εργασιών (για συνηθισμένες ασύγχρονες λειτουργίες) ή στην ουρά μικροεργασιών (για υποσχέσεις).
Ο βρόχος γεγονότων ελέγχει συνεχώς τη στοίβα κλήσεων. Αν είναι άδεια:
- Ελέγχει την ουρά μικροεργασιών. Αν υπάρχουν χειριστές, τους μεταφέρει στη στοίβα κλήσεων για εκτέλεση, μέχρι η ουρά μικροεργασιών να αδειάσει.
- Στη συνέχεια, ελέγχει την ουρά εργασιών. Αν υπάρχουν χειριστές, τους μεταφέρει στην στοίβα κλήσεων για εκτέλεση.
Αυτή η διαδικασία επαναλαμβάνεται, επιτρέποντας την εκτέλεση ασύγχρονων λειτουργιών χωρίς να μπλοκάρει το κύριο νήμα.

Παράδειγμα με setTimeout:

// Αυτός ο κώδικας εκτελείται στη στοίβα κλήσεων
console.log('Start');

// setTimeout - Web API. Το callback τοποθετείται στην ουρά εργασιών μετά από 0ms.
// Η πραγματική εκτέλεση μπορεί να καθυστερήσει λόγω του βρόχου γεγονότων.
setTimeout(() => {
  console.log('Timeout');
}, 0);

// Αυτός ο κώδικας εκτελείται στη στοίβα κλήσεων μετά το setTimeout
console.log('End');

// Έξοδος:
// Start
// End
// Timeout

Παράδειγμα με υποσχέσεις:

// Εκτελείται στη στοίβα κλήσεων
console.log('A');

// Υπόσχεση. Το callback του then() τοποθετείται στην ουρά μικροεργασιών
Promise.resolve().then(() => {
  console.log('B');
});

// Εκτελείται στη στοίβα κλήσεων
console.log('C');

// Έξοδος:
// A
// C
// B

Πώς λειτουργεί ο βρόχος γεγονότων (event loop) στο web-API;