Μίλησέ μου για τον βρόχο γεγονότων (event loop)…

Ο βρόχος γεγονότων αποτελεί τη βάση της ασύγχρονης εργασίας στην JavaScript. Διαχειρίζεται την εκτέλεση κώδικα, τη διαχείριση γεγονότων και την αλληλεπίδραση με τον εξωτερικό κόσμο.

Βασικά συστατικά:

Heap (Heap): Περιοχή μνήμης για την κατανομή αντικειμένων.
Stack (Stack): Τόπος όπου αποθηκεύονται τα πλαίσια εκτέλεσης συναρτήσεων. Όταν καλείται μια συνάρτηση, τοποθετείται στο stack, και όταν ολοκληρώνεται, αφαιρείται.
Web API: Διεπαφές που παρέχονται από το πρόγραμμα περιήγησης (DOM, AJAX, Timers κ.λπ.). Διαχειρίζονται ασύγχρονες λειτουργίες.
Callback Queue (Ουρά callback): Ουρά μηνυμάτων που σχετίζονται με γεγονότα. Τα Web API τοποθετούν εδώ τα callback των ολοκληρωμένων ασύγχρονων λειτουργιών.
Event Loop (Βρόχος γεγονότων): Παρακολουθεί συνεχώς το stack και την ουρά callback. Αν το stack είναι άδειο, παίρνει το πρώτο callback από την ουρά και το τοποθετεί στο stack για εκτέλεση.

Διαδικασία:

Ο συγχρονικός κώδικας εκτελείται στο stack.
Οι ασύγχρονες λειτουργίες (setTimeout, fetch) αποστέλλονται στα Web API.
Όταν μια ασύγχρονη λειτουργία ολοκληρώνεται, το callback της τοποθετείται στην ουρά callback.
Ο βρόχος γεγονότων περιμένει μέχρι το stack να αδειάσει.
Όταν το stack είναι άδειο, ο βρόχος γεγονότων παίρνει το πρώτο callback από την ουρά και το τοποθετεί στο stack, όπου εκτελείται.

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

console.log('Αρχή');

setTimeout(() => {
  console.log('Μέσα στο setTimeout');
}, 0);

console.log('Τέλος');

Το αποτέλεσμα θα είναι:

Αρχή
Τέλος
Μέσα στο setTimeout

Παρόλο που ο χρόνος αναμονής είναι 0 ms, το callback του setTimeout εκτελείται μετά τον συγχρονικό κώδικα, επειδή μπαίνει στην ουρά και περιμένει να αδειάσει το stack.

Στο Node.js, υπάρχει επίσης ένας βρόχος γεγονότων, αλλά με μερικές διαφορές στις φάσεις επεξεργασίας των ουρών.

Μίλησέ μου για τον βρόχο γεγονότων (event loop).