Τι είναι η λειτουργία επανάκλησης στο JavaScript;

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

Οι συναρτήσεις είναι αντικείμενα

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

Λειτουργίες επιστροφής κλήσης

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

Για να απεικονίσουμε τις επιστροφές κλήσεων, ας ξεκινήσουμε με ένα απλό παράδειγμα:

function createQuote(quote, callback){ var myQuote = "Like I always say, " + quote; callback(myQuote); // 2 } function logQuote(quote){ console.log(quote); } createQuote("eat your vegetables!", logQuote); // 1 // Result in console: // Like I always say, eat your vegetables!

Στο παραπάνω παράδειγμα, createQuoteείναι η συνάρτηση υψηλότερης τάξης, η οποία δέχεται δύο ορίσματα, το δεύτερο είναι η επανάκληση. Η logQuoteσυνάρτηση χρησιμοποιείται για να περάσει ως λειτουργία επανάκλησης. Όταν εκτελούμε τη createQuoteσυνάρτηση (1) , παρατηρήστε ότι δεν προσθέτουμε παρενθέσεις logQuoteόταν την περνάμε ως όρισμα. Αυτό συμβαίνει επειδή δεν θέλουμε να εκτελέσουμε τη λειτουργία επιστροφής κλήσης αμέσως, απλώς θέλουμε να περάσουμε τον ορισμό της συνάρτησης στη λειτουργία υψηλότερης τάξης, ώστε να μπορεί να εκτελεστεί αργότερα.

Επίσης, πρέπει να διασφαλίσουμε ότι εάν η συνάρτηση επανάκλησης που περνάμε αναμένει ορίσματα, ότι παρέχουμε αυτά τα ορίσματα κατά την εκτέλεση της επανάκλησης (2) . Στο παραπάνω παράδειγμα, αυτή θα ήταν η callback(myQuote);δήλωση, καθώς γνωρίζουμε ότι logQuoteαναμένει να παραδοθεί μια προσφορά.

Επιπλέον, μπορούμε να περάσουμε σε ανώνυμες λειτουργίες ως επιστροφές κλήσεων. Η παρακάτω κλήση createQuoteθα έχει το ίδιο αποτέλεσμα με το παραπάνω παράδειγμα:

createQuote("eat your vegetables!", function(quote){ console.log(quote); });

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

function createQuote(quote, functionToCall) { var myQuote = "Like I always say, " + quote; functionToCall(myQuote); }

Γιατί να χρησιμοποιήσετε τις λειτουργίες Callback;

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

Ας ρίξουμε μια ματιά σε ένα παράδειγμα που προσομοιώνει ένα αίτημα σε έναν διακομιστή:

function serverRequest(query, callback){ setTimeout(function(){ var response = query + "full!"; callback(response); },5000); } function getResults(results){ console.log("Response from the server: " + results); } serverRequest("The glass is half ", getResults); // Result in console after 5 second delay: // Response from the server: The glass is half full!

Στο παραπάνω παράδειγμα, κάνουμε ένα ψεύτικο αίτημα σε έναν διακομιστή. Μετά από 5 δευτερόλεπτα, η απόκριση τροποποιείται και στη συνέχεια getResultsεκτελείται η λειτουργία επιστροφής κλήσης . Για να το δείτε σε δράση, μπορείτε να αντιγράψετε / επικολλήσετε τον παραπάνω κώδικα στο εργαλείο προγραμματιστή του προγράμματος περιήγησής σας και να τον εκτελέσετε.

Επίσης, εάν είστε ήδη εξοικειωμένοι setTimeout, τότε έχετε χρησιμοποιήσει όλες τις λειτουργίες επανάκλησης. Το όρισμα ανώνυμης συνάρτησης που μεταφέρεται στην setTimeoutκλήση συνάρτησης του παραπάνω παραδείγματος είναι επίσης μια επιστροφή κλήσης! Έτσι, η αρχική επανάκληση του παραδείγματος εκτελείται στην πραγματικότητα από άλλη επιστροφή κλήσης. Προσέξτε να μην τοποθετήσετε πάρα πολλές επιστροφές αν μπορείτε να το βοηθήσετε, καθώς αυτό μπορεί να οδηγήσει σε κάτι που ονομάζεται «callback hell»! Όπως υποδηλώνει το όνομα, δεν είναι χαρά να το αντιμετωπίσουμε.