Κατανόηση σύγχρονης και ασύγχρονης στη JavaScript - Μέρος 2

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

Ένα παράξενο αίτημα

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

Δεν είναι ευχαριστημένος γι 'αυτό, θυμηθείτε, δεν λαμβάνει ένα νέο μήνυμα μέχρι να τελειώσει με το σημερινό, και αν παίρνει τη δική σας, αυτός πρέπει να περιμένει πέντε ώρες για να ξεκινήσει καν το έργο. Έτσι, για να μην είναι σπατάλη χρόνου, αυτός φέρνει έναν βοηθό, Κ. Η.

Αντί να περιμένει, τον ρωτάει ο κ. Η αφήστε ένα νέο μήνυμα για την εργασία στην ουρά μετά την πάροδο των ωρών, και προχωρά στο επόμενο μήνυμα.

Πέντε ώρες από το παρελθόν. Κ. Η ενημερώνει την ουρά με ένα νέο μήνυμα. Αφού έχει ολοκληρώσει τη διεκπεραίωση όλων των δεδουλευμένων μηνυμάτων πριν από τον κ. H, κ. Χ εκτελεί το ζητούμενο έργο σας. Έτσι, με αυτόν τον τρόπο, μπορείτε να αφήσετε ένα αίτημα να είναι συμμορφωθεί αργότερα, και μην περιμένετε μέχρι να εκπληρωθεί.

Γιατί όμως ο κ. H αφήνει ένα μήνυμα στην ουρά αντί να επικοινωνεί απευθείας με τον κ. X; Διότι, όπως ανέφερα στο πρώτο μέρος, το μόνο τρόπος επικοινωνίας με τον κ. X είναι αφήνοντας ένα μήνυμα σε αυτόν μέσω τηλεφωνικής κλήσης - χωρίς εξαιρέσεις.

1. Το setTimeout () μέθοδος

Ας υποθέσουμε ότι έχετε ένα σύνολο κωδικών που θέλετε εκτέλεση μετά από ορισμένο χρόνο. Για να το κάνετε αυτό, απλά τυλίξτε το σε μια λειτουργία, και προσθέστε το σε α setTimeout () μέθοδος μαζί με τον χρόνο καθυστέρησης. Η σύνταξη του setTimeout () είναι όπως ακολουθεί:

 setTimeout (συνάρτηση, χρόνος καθυστέρησης, arg ...) 

ο arg ... η παράμετρος αντιπροσωπεύει οποιοδήποτε όρισμα που λαμβάνει η λειτουργία και χρόνος καθυστέρησης πρέπει να προστεθεί σε χιλιοστά του δευτερολέπτου. Παρακάτω μπορείτε να δείτε ένα απλό παράδειγμα κώδικα που εξάγει “Γεια σου” στην κονσόλα μετά από 3 δευτερόλεπτα.

 setTimeout (συνάρτηση () console.log ('hey'), 3000); 

Μια φορά setTimeout () αρχίζει να τρέχει, αντί να αποκλείσετε τη στοίβα κλήσεων έως ότου τελειώσει ο καθορισμένος χρόνος καθυστέρησης, a χρονοδιακόπτη ενεργοποιείται, και η στοίβα κλήσεων αδειάζει σταδιακά για το επόμενο μήνυμα (όπως και η αντιστοιχία μεταξύ του κ. Χ και του κ. H).

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

2. AJAX

Το AJAX (Ασύγχρονη JavaScript και XML) είναι μια έννοια που χρησιμοποιεί το XMLHttpRequest (XHR) API στο να κάνετε αιτήματα διακομιστή και χειριστείτε τις απαντήσεις.

Όταν τα προγράμματα περιήγησης πραγματοποιούν αιτήσεις διακομιστή χωρίς να χρησιμοποιούν το XMLHttpRequest, το σελίδα ανανεώνεται και επαναφέρει το περιβάλλον χρήστη του. Όταν η επεξεργασία των αιτημάτων και των απαντήσεων γίνεται από το XHR API, και Το UI παραμένει ανεπηρέαστο.

Έτσι, βασικά ο στόχος είναι να κάνει αιτήματα χωρίς επαναφόρτωση σελίδων. Τώρα, πού είναι το “ασύγχρονη” σε αυτό? Απλά χρησιμοποιώντας τον κώδικα XHR (ο οποίος θα δούμε σε λίγο) δεν σημαίνει ότι είναι AJAX, επειδή το API XHR μπορεί να εργάζονται συγχρόνως και ασύγχρονα.

XHR από προεπιλογή Έχει οριστεί λειτουργούν ασύγχρονα. όταν μια λειτουργία κάνει μια αίτηση χρησιμοποιώντας το XHR, αυτό επιστρέφει χωρίς να περιμένει την απάντηση.

Εάν το XHR έχει ρυθμιστεί σε να είναι σύγχρονα, τότε η λειτουργία περιμένει έως το απάντηση λαμβάνεται και υποβάλλεται σε επεξεργασία πριν επιστρέψετε.

Παράδειγμα κώδικα 1

Αυτό το παράδειγμα παρουσιάζει ένα XMLHttpRequest δημιουργία αντικειμένων. ο Άνοιξε() , επικυρώνει τη διεύθυνση URL αίτησης και το στείλετε() η μέθοδος στέλνει το αίτημα.

 var xhr = νέα XMLHttpRequest (); xhr.open ("GET", url). xhr.send (); 

Οποιαδήποτε άμεση πρόσβαση στα δεδομένα απόκρισης μετά στείλετε() θα είναι μάταια, γιατί στείλετε() δεν περιμένει έως ότου ολοκληρωθεί η αίτηση. Θυμηθείτε ότι το XMLHTTPRequest έχει ρυθμιστεί να λειτουργεί ασύγχρονα από προεπιλογή.

Παράδειγμα κώδικα 2

ο hello.txt αρχείο σε αυτό το παράδειγμα είναι ένα απλό αρχείο κειμένου που περιέχει το κείμενο «γεια». ο απάντηση η ιδιότητα του XHR δεν είναι έγκυρη, αφού δεν έδωσε το κείμενο "hello".

 var xhr = νέα XMLHttpRequest (); xhr.open ("GET", "hello.txt"). xhr.send (); document.write (xhr.response); // κενή συμβολοσειρά 

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

 var xhr = νέα XMLHttpRequest (); xhr.open ("GET", "hello.txt"). xhr.send (); xhr.onload = συνάρτηση () document.write (this.response) // γράφει 'hello' στο έγγραφο 

Η απόκριση στο εσωτερικό του φορτίου εξόδους "γεια", το σωστό κείμενο.

Προτιμάται ο ασύγχρονος τρόπος, καθώς δεν αποκλείει άλλα σενάρια μέχρι να ολοκληρωθεί η αίτηση.

Εάν η απόκριση πρέπει να γίνει συγχρονισμένη, θα περάσουμε ψευδής ως το τελευταίο επιχείρημα της Άνοιξε, οι οποίες επισημαίνει το API XHR λέγοντας πρέπει να είναι σύγχρονη (από προεπιλογή το τελευταίο όρισμα του Άνοιξε είναι αληθής, που δεν χρειάζεται να καθορίσετε ρητά).

 var xhr = νέα XMLHttpRequest (); xhr.open ("GET", "hello.txt", ψευδή); xhr.send (); document.write (xhr.response); // γράφει 'γεια' για να τεκμηριώσει 

Γιατί να μάθετε όλα αυτά?

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

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