Κατανόηση της εκτέλεσης JavaScript: Χρήση setTimeout και Promises για τον προσδιορισμό της σύγχρονης έναντι της ασύγχρονης συμπεριφοράς

Κατανόηση του τρόπου με τον οποίο η JavaScript εκτελεί κώδικα: Σύγχρονα και Ασύγχρονα Μοτίβα

Η JavaScript είναι μια γλώσσα με ένα νήμα, που σημαίνει ότι εκτελεί μία γραμμή κώδικα κάθε φορά. Η κατανόηση του τρόπου με τον οποίο χειρίζεται τόσο τις σύγχρονες όσο και τις ασύγχρονες εργασίες είναι ζωτικής σημασίας για τους προγραμματιστές. Συχνά, ερωτήσεις σχετικά με αυτό το θέμα εμφανίζονται σε τεχνικές συνεντεύξεις, καθιστώντας σημαντικό να κατανοήσουμε πλήρως αυτές τις έννοιες.

Όταν οι προγραμματιστές χρησιμοποιούν λειτουργίες όπως ή , η ροή εκτέλεσης μπορεί να φαίνεται λίγο απρόβλεπτη στην αρχή. Ωστόσο, ακολουθώντας μια σαφή δομή, μπορείτε να καθορίσετε την ακριβή σειρά με την οποία θα εκτελεστούν διαφορετικά μέρη του κώδικά σας. Αυτό είναι ιδιαίτερα σημαντικό όταν αντιμετωπίζετε και ουρές εκδηλώσεων.

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

Αυτό το άρθρο έχει σχεδιαστεί για να σας βοηθήσει να προσδιορίσετε τη σειρά εκτέλεσης σε JavaScript, μια χρήσιμη ικανότητα κατά την αντιμετώπιση ερωτήσεων συνέντευξης ή τον εντοπισμό σφαλμάτων ασύγχρονου κώδικα. Ας βουτήξουμε σε ένα πρακτικό παράδειγμα για να δείξουμε ξεκάθαρα τις έννοιες.

Εντολή	Παράδειγμα χρήσης
setTimeout()	Αυτή η συνάρτηση προγραμματίζει την εκτέλεση κώδικα μετά από μια καθορισμένη καθυστέρηση. Χρησιμοποιείται για την προσομοίωση ασύγχρονων εργασιών, όπως η καθυστέρηση ενεργειών ή η αναβολή λειτουργιών στον βρόχο συμβάντος. Στο παράδειγμα, χρησιμοποιείται για την καθυστέρηση της εκτέλεσης της καταγραφής "B" και "E".
Promise.resolve()	Δημιουργεί μια υπόσχεση που επιλύεται αμέσως. Αυτό είναι χρήσιμο όταν χρειάζεται να εκτελέσετε ασύγχρονο κώδικα, αλλά δεν χρειάζεται να περιμένετε για μια εξωτερική συνθήκη. Στο παράδειγμα, χρησιμοποιείται για την ασύγχρονη καταγραφή του "D" μετά το "B".
then()	Αυτή η μέθοδος επισυνάπτει μια επιστροφή κλήσης σε μια υπόσχεση που θα εκτελεστεί όταν επιλυθεί η υπόσχεση. Διασφαλίζει ότι ορισμένος κώδικας θα εκτελεστεί μετά την ολοκλήρωση μιας ασύγχρονης εργασίας. Εδώ, διασφαλίζει ότι το "D" καταγράφεται μετά την επιλυθείσα υπόσχεση.
Event Loop	Ο βρόχος συμβάντος είναι ένας μηχανισμός που χειρίζεται την εκτέλεση ασύγχρονων εργασιών σε JavaScript. Αν και δεν είναι απευθείας εντολή, η κατανόηση της λειτουργίας της είναι κρίσιμη για την εξήγηση της σειράς των λειτουργιών στον κώδικα. Επεξεργάζεται εργασίες από την ουρά επανάκλησης μετά την εκκαθάριση της τρέχουσας στοίβας.
Microtask Queue	Αυτή είναι μια ουρά προτεραιότητας για εργασίες όπως επιλυμένες υποσχέσεις. Οι μικροεργασίες (όπως οι επιλυμένες υποσχέσεις) εκτελούνται πριν από εργασίες από την ουρά εργασιών του βρόχου συμβάντων (όπως οι επανακλήσεις setTimeout). Αυτός είναι ο λόγος για τον οποίο το "D" καταγράφεται πριν από το "E".
Console.log()	Χρησιμοποιείται για την εκτύπωση μηνυμάτων στην κονσόλα για σκοπούς εντοπισμού σφαλμάτων. Σε αυτό το πλαίσιο, είναι χρήσιμο για την παρακολούθηση της σειράς με την οποία εκτελείται ο σύγχρονος και ο ασύγχρονος κώδικας.
Callback Queue	Η ουρά επανάκλησης αποθηκεύει εργασίες που είναι έτοιμες να εκτελεστούν μετά την ολοκλήρωση της τρέχουσας εκτέλεσης κώδικα, όπως συναρτήσεις που μεταβιβάζονται στο setTimeout. Ο βρόχος συμβάντος μετακινεί αυτές τις εργασίες στη στοίβα κλήσεων.
Zero Delay	Όταν μια καθυστέρηση setTimeout() έχει οριστεί στο 0, η επανάκληση εκτελείται αφού ολοκληρωθούν όλες οι σύγχρονες εργασίες και οι μικροεργασίες. Στο παράδειγμα, η επανάκληση με "E" τρέχει μετά το "D", παρόλο που η καθυστέρηση είναι 0.
Asynchronous Execution	Αυτό είναι ένα παράδειγμα προγραμματισμού όπου ορισμένες λειτουργίες εκτελούνται χωριστά από την κύρια ροή κώδικα, επιτρέποντας στη JavaScript να χειρίζεται εργασίες όπως αιτήματα δικτύου ή χρονόμετρα χωρίς να μπλοκάρει το κύριο νήμα.

Εξερεύνηση της ροής εκτέλεσης JavaScript: Σύγχρονος έναντι Ασύγχρονος Κώδικας

Στο JavaScript, η κατανόηση της σειράς εκτέλεσης του σύγχρονου και του ασύγχρονου κώδικα είναι απαραίτητη, ιδιαίτερα όταν έχουμε να κάνουμε με και . Η βασική ιδέα που πρέπει να κατανοήσετε είναι ο τρόπος με τον οποίο ο βρόχος συμβάντων επεξεργάζεται πρώτα τις σύγχρονες εργασίες και στη συνέχεια προχωρά στον χειρισμό ασύγχρονων εργασιών σε ουρά. Στο παρεχόμενο παράδειγμα κώδικα, τα δύο πρώτα αρχεία καταγραφής ("A" και "F") είναι σύγχρονα, που σημαίνει ότι εκτελούνται με την ακριβή σειρά που εμφανίζονται στον κώδικα. Τη στιγμή που εκτελούνται, το σενάριο προγραμματίζει αμέσως ασύγχρονες εργασίες όπως το setTimeout για μεταγενέστερη επεξεργασία.

Η συνάρτηση setTimeout είναι ένας συνηθισμένος τρόπος αναβολής λειτουργιών, δημιουργώντας μια αίσθηση καθυστέρησης στη ροή εκτέλεσης. Στην προκειμένη περίπτωση και τα δύο Οι συναρτήσεις χρησιμοποιούνται για την προσθήκη αρχείων καταγραφής της κονσόλας "B" και "E" στην ουρά συμβάντων. Είναι σημαντικό να σημειωθεί ότι αν και το "E" έχει καθυστέρηση 0 χιλιοστών του δευτερολέπτου, εξακολουθεί να βρίσκεται σε ουρά μετά την ολοκλήρωση των τρεχουσών σύγχρονων λειτουργιών και των μικροεργασιών. Η κατανόηση αυτής της λεπτής διάκρισης είναι ζωτικής σημασίας για τον καθορισμό της σειράς εκτέλεσης για πιο σύνθετες εργασίες JavaScript.

Μέσα στο πρώτο επανάκληση, το αρχείο καταγραφής "B" εκτυπώνεται πρώτο καθώς εξακολουθεί να αποτελεί μέρος της ουράς σύγχρονης εργασίας, η οποία έχει προτεραιότητα. Στη συνέχεια, εντός αυτής της επανάκλησης, δημιουργείται μια επιλυμένη υπόσχεση με . Αυτό ενεργοποιεί μια μικροεργασία που διασφαλίζει ότι το αρχείο καταγραφής "D" εμφανίζεται μετά το "B" αλλά πριν από οποιαδήποτε άλλη εργασία στην κύρια ουρά συμβάντων. Αυτή η συμπεριφορά των Promises που τοποθετούνται στην ουρά μικροεργασιών είναι αυτή που επιτρέπει στο "D" να καταγραφεί πριν από το δεύτερο setTimeout καταγραφής επανάκλησης "E". Έτσι, οι μικροεργασίες έχουν προτεραιότητα έναντι των τυπικών ασύγχρονων εργασιών.

Για να συνοψίσουμε την τελική σειρά εκτέλεσης: Τα "A" και "F" καταγράφονται συγχρονισμένα, ακολουθούμενα από το "B", το οποίο βρίσκεται στην ουρά από το πρώτο setTimeout. Η επιλυθείσα υπόσχεση προκαλεί το "D" να καταγραφεί στη συνέχεια ως μικροεργασία. Τέλος, το "E" καταγράφεται τελευταίο επειδή είναι μέρος του δεύτερου επανάκληση. Αυτή η κατανόηση της ροής εκτέλεσης της JavaScript, που συνδυάζει σύγχρονες εργασίες, τον βρόχο συμβάντων και μικροεργασίες, είναι πολύτιμη κατά την απάντηση σε ερωτήσεις συνέντευξης ή τον εντοπισμό σφαλμάτων ασύγχρονου κώδικα σε πραγματικά έργα.

console.log("A");
setTimeout(() => {
    console.log("B");
    Promise.resolve("C").then(() => console.log("D"));
}, 1000);
setTimeout(() => console.log("E"), 0);
console.log("F");

console.log("Start");
setTimeout(() => {
    console.log("Middle");
}, 500);
Promise.resolve().then(() => {
    console.log("Promise 1");
});
console.log("End");

Βαθιά βουτήξτε στον βρόχο συμβάντων και την ιεράρχηση εργασιών της JavaScript

Μια βασική πτυχή της ασύγχρονης συμπεριφοράς της JavaScript είναι η , το οποίο είναι υπεύθυνο για το χειρισμό της εκτέλεσης επανακλήσεων, υποσχέσεων και άλλου ασύγχρονου κώδικα. Αυτός ο βρόχος συμβάντων ελέγχει συνεχώς εάν η στοίβα κλήσεων είναι κενή και, εάν είναι, επεξεργάζεται τις εργασίες από την ουρά επανάκλησης και την ουρά μικροεργασιών. Η κατανόηση του τρόπου με τον οποίο ιεραρχούνται οι εργασίες σε αυτές τις ουρές είναι κρίσιμης σημασίας για τη διασφάλιση της συμπεριφοράς του κώδικα όπως αναμένεται, ειδικά κατά τον χειρισμό και υπόσχεται ταυτόχρονα.

Η ουρά μικροεργασιών έχει προτεραιότητα έναντι της ουράς επανάκλησης. Εργασίες όπως τοποθετούνται στην ουρά μικροεργασιών, που σημαίνει ότι εκτελούνται πριν από τυχόν καθυστερημένες εργασίες από την ουρά επανάκλησης, ακόμα κι αν το setTimeout έχει μηδενική καθυστέρηση. Αυτός είναι ο λόγος για τον οποίο στο παράδειγμα κώδικα, το αρχείο καταγραφής "D" από την υπόσχεση εκτελείται πριν από το αρχείο καταγραφής "E" από το δεύτερο setTimeout. Είναι ζωτικής σημασίας για τους προγραμματιστές να το καταλάβουν αυτό όταν γράφουν κώδικα που συνδυάζει ασύγχρονες λειτουργίες για να αποφευχθεί η απροσδόκητη συμπεριφορά.

Σε εφαρμογές πραγματικού κόσμου, οι ασύγχρονες λειτουργίες όπως οι κλήσεις API ή τα χρονόμετρα συχνά αλληλεπιδρούν με τον σύγχρονο κώδικα. Γνωρίζοντας πώς λειτουργεί ο βρόχος συμβάντος, η ουρά επανάκλησης και η ουρά μικροεργασιών, οι προγραμματιστές μπορούν να προβλέψουν καλύτερα το αποτέλεσμα του κώδικά τους. Αυτό είναι ιδιαίτερα σημαντικό κατά τη βελτιστοποίηση της απόδοσης ή τον εντοπισμό σφαλμάτων σύνθετων σεναρίων όπου και τα δύο και ο σύγχρονος κώδικας αλληλεπιδρούν συχνά.

1. Τι είναι ο βρόχος συμβάντων στο JavaScript;
2. Ο βρόχος συμβάντος είναι ο μηχανισμός που χρησιμοποιεί η JavaScript για τη διαχείριση και την ιεράρχηση της εκτέλεσης ασύγχρονων λειτουργιών, όπως αυτές που ενεργοποιούνται από ή .
3. Πώς κάνει εργασία;
4. προγραμματίζει μια επανάκληση που θα εκτελεστεί μετά από μια καθορισμένη καθυστέρηση, αλλά τοποθετείται στην ουρά επανάκλησης και εκτελείται μόνο αφού ολοκληρωθεί η επεξεργασία όλων των σύγχρονων κωδικών και των μικροεργασιών.
5. Γιατί το α επιλύω πριν από α με καθυστέρηση 0;
6. Οι υποσχέσεις τοποθετούνται στην ουρά μικροεργασιών, η οποία έχει μεγαλύτερη προτεραιότητα σε σχέση με την ουρά επανάκλησης, όπου τοποθετούνται ανακλήσεις.
7. Ποια είναι η διαφορά μεταξύ της ουράς επανάκλησης και της ουράς μικροεργασιών;
8. Η ουρά επανάκλησης χρησιμοποιείται για και άλλες ασύγχρονες λειτουργίες, ενώ η ουρά microtask χειρίζεται εργασίες όπως επιλύει και τις επεξεργάζεται πριν από την επανάκληση.
9. Ποια είναι η σειρά εκτέλεσης δηλώσεις στο παρεχόμενο παράδειγμα;
10. Η σειρά είναι "A", "F", "B", "D", "E", λόγω του τρόπου με τον οποίο χειρίζονται οι σύγχρονες και οι ασύγχρονες εργασίες από τον βρόχο συμβάντων.

Η κατανόηση του βρόχου συμβάντων της JavaScript είναι κρίσιμη για την εξοικείωση με τον τρόπο λειτουργίες όπως και εκτελούνται. Βοηθά τους προγραμματιστές να διασφαλίσουν ότι ο κώδικάς τους συμπεριφέρεται όπως αναμένεται και να αποφεύγουν κοινές παγίδες κατά το χειρισμό πολλαπλών εργασιών.

Σε αυτό το παράδειγμα, η τελική σειρά εκτέλεσης των "A", "F", "B", "D" και "E" δείχνει πώς οι μικροεργασίες (Promises) έχουν προτεραιότητα έναντι των επανακλήσεων από το setTimeout. Αυτή η γνώση είναι ανεκτίμητη για ερωτήσεις συνέντευξης και πραγματικές προκλήσεις κωδικοποίησης.