Πώς χειρίζεται το JavaScript event loop το ασύγχρονο έργο;

Question

Accepted Answer

Το JavaScript εκτελείται σε ένα **μόνο thread**, επομένως μπορεί να κάνει μόνο ένα πράγμα κάθε φορά. Το **event loop** είναι αυτό που του επιτρέπει να χειρίζεται ασύγχρονο έργο χωρίς blocking: εκτελεί το call stack, και όταν το stack είναι κενό, τραβά callbacks από τις ουρές.

Υπάρχουν δύο ουρές με διαφορετικές προτεραιότητες:
- **Microtasks**: Promise callbacks (`.then`), `queueMicrotask`. Αδειάζονται **εντελώς** μετά από κάθε task, πριν το rendering.
- **Macrotasks**: `setTimeout`, I/O, UI events. Ένα επεξεργάζεται ανά επανάληψη βρόχου.

```js
console.log("1");                         // sync
setTimeout(() => console.log("2"), 0);    // macrotask
Promise.resolve().then(() => console.log("3")); // microtask
console.log("4");                         // sync
// Output: 1, 4, 3, 2
```

## Γιατί αυτή η σειρά

1. Ο σύγχρονος κώδικας εκτελείται πρώτα: `1`, `4`.
2. Το stack αδειάζει → αδειάστε **όλα τα microtasks**: `3`.
3. Στη συνέχεια πάρτε **ένα macrotask**: `2`.

Αυτό είναι το γιατί το `Promise.then` εκτελείται **πριν** από το `setTimeout(…, 0)`, ακόμα κι αν και τα δύο είναι "ασύγχρονα" — τα microtasks έχουν προτεραιότητα.

## Μια πρακτική συνέπεια

```js
// ❌ blocks the single thread — UI freezes for 5 seconds
while (Date.now() - start < 5000) {}
```

Το μεγάλο σύγχρονο έργο μπλοκάρει τα πάντα (rendering, κλικ). Μετακινήστε βαρύ CPU έργο σε ένα **Web Worker** (ένα πραγματικό ξεχωριστό thread).

## Γιατί έχει σημασία

Η κατανόηση του βρόχου εξηγεί τη σειρά ασύγχρονων, γιατί τα promises επιλύονται πριν από τους χρονοδιακόπτες, και γιατί δεν πρέπει ποτέ να μπλοκάρουμε το κύριο thread — το βασικό νοητικό μοντέλο για όλο το ασύγχρονο JavaScript.