Λειτουργίες επιστροφής κλήσης JavaScript - Τι είναι οι επιστροφές κλήσεων στο JS και πώς να τις χρησιμοποιήσετε

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

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

Τι είναι η λειτουργία Callback;

Στο JavaScript, οι συναρτήσεις είναι αντικείμενα. Μπορούμε να μεταφέρουμε αντικείμενα σε συναρτήσεις ως παράμετροι; Ναί.

Έτσι, μπορούμε επίσης να περάσουμε τις συναρτήσεις ως παραμέτρους σε άλλες συναρτήσεις και να τις καλέσουμε μέσα στις εξωτερικές λειτουργίες. Ακούγεται περίπλοκο; Επιτρέψτε μου να το δείξω σε ένα παρακάτω παράδειγμα:

function print(callback) { callback(); }

Η λειτουργία εκτύπωσης () παίρνει μια άλλη λειτουργία ως παράμετρο και την καλεί μέσα. Αυτό ισχύει σε JavaScript και το αποκαλούμε «callback». Έτσι, μια συνάρτηση που μεταβιβάζεται σε άλλη συνάρτηση ως παράμετρος είναι μια συνάρτηση επανάκλησης. Αλλά δεν είναι μόνο αυτό.

Μπορείτε επίσης να παρακολουθήσετε την έκδοση βίντεο των λειτουργιών επανάκλησης παρακάτω:

Γιατί χρειαζόμαστε λειτουργίες επιστροφής κλήσης;

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

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

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

Πώς να δημιουργήσετε μια επιστροφή κλήσης

Για να καταλάβω τι εξήγησα παραπάνω, επιτρέψτε μου να ξεκινήσω με ένα απλό παράδειγμα. Θέλουμε να καταγράψουμε ένα μήνυμα στην κονσόλα, αλλά θα πρέπει να είναι εκεί μετά από 3 δευτερόλεπτα.

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

Υπάρχει μια ενσωματωμένη μέθοδος στο JavaScript που ονομάζεται "setTimeout", η οποία καλεί μια συνάρτηση ή αξιολογεί μια έκφραση μετά από μια δεδομένη χρονική περίοδο (σε χιλιοστά του δευτερολέπτου). Λοιπόν εδώ, η λειτουργία «μήνυμα» καλείται αφού περάσουν 3 δευτερόλεπτα. (1 δευτερόλεπτο = 1000 χιλιοστά του δευτερολέπτου)

Με άλλα λόγια, η λειτουργία μηνύματος καλείται μετά από κάτι που συνέβη (μετά από 3 δευτερόλεπτα για αυτό το παράδειγμα), αλλά όχι πριν. Επομένως, η λειτουργία μηνυμάτων είναι ένα παράδειγμα μιας λειτουργίας επανάκλησης.

Τι είναι μια ανώνυμη συνάρτηση;

Εναλλακτικά, μπορούμε να ορίσουμε μια συνάρτηση απευθείας μέσα σε μια άλλη συνάρτηση, αντί να την καλούμε. Θα μοιάζει με αυτό:

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

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

Επιστροφή ως συνάρτηση βέλους

Εάν προτιμάτε, μπορείτε επίσης να γράψετε την ίδια λειτουργία επιστροφής κλήσης με τη λειτουργία βέλους ES6, η οποία είναι ένας νεότερος τύπος λειτουργίας στο JavaScript:

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

Τι γίνεται με τις εκδηλώσεις;

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

Click here

Αυτή τη φορά θα δούμε ένα μήνυμα στην κονσόλα μόνο όταν ο χρήστης κάνει κλικ στο κουμπί:

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

Εδώ επιλέγουμε πρώτα το κουμπί με το αναγνωριστικό του και μετά προσθέτουμε ένα πρόγραμμα ακρόασης συμβάντων με τη μέθοδο addEventListener. Χρειάζονται 2 παράμετροι. Ο πρώτος είναι ο τύπος του, «κλικ» και η δεύτερη παράμετρος είναι μια συνάρτηση επανάκλησης, η οποία καταγράφει το μήνυμα όταν κάνετε κλικ στο κουμπί.

Όπως μπορείτε να δείτε, οι λειτουργίες επανάκλησης χρησιμοποιούνται επίσης για δηλώσεις συμβάντων σε JavaScript.

Τύλιξε

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

Αν θέλετε να μάθετε περισσότερα σχετικά με την ανάπτυξη ιστού, μη διστάσετε να με ακολουθήσετε στο Youtube !

Ευχαριστούμε που το διαβάσατε!