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

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

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

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

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

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

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

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

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

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

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

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

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