Το αγαπημένο του καθενός: concept video time! Οι επιστροφές κλήσης είναι μια σημαντική ιδέα στο JavaScript. Είναι συναρτήσεις που καλούνται όταν ολοκληρωθεί η εκτέλεση μιας ενέργειας. Στη συνέχεια, δανείστε τη δομή και το χρονοδιάγραμμα στον κωδικό μας.
Πάρτε για παράδειγμα την κινούμενη εικόνα που χρησιμοποιήσαμε στο τελευταίο βίντεο. Τα κινούμενα σχέδια χρειάζονται χρόνο για να τρέξουν. Τι γίνεται αν θέλετε να συμβεί κάτι άλλο όταν τελειώσει αυτό το κινούμενο σχέδιο; Πρέπει να κάνετε ένα setTimeoutίδιο μήκος με το κινούμενο σχέδιο; Οχι. Το jQuery μας δίνει λειτουργίες επανάκλησης που χρησιμοποιούνται μόνο για το σκοπό αυτό.
Συνήθως είναι μια πρόσθετη παράμετρος που μεταβιβάζουμε στη μέθοδο. Στην περίπτωση της κινούμενης εικόνας, περνάμε μια συνάρτηση ως την τελευταία παράμετρο. Αυτή είναι η λειτουργία επανάκλησης και θα κληθεί όταν ολοκληρωθεί η κινούμενη εικόνα.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Φαίνεται λίγο funky, αλλά ουσιαστικά απλά κάνουμε:
.animate(a, b)Πού aείναι ένα αντικείμενο ιδιοτήτων και τιμών και bείναι μια συνάρτηση επανάκλησης.
Ωστόσο, γνωρίζουμε από το τελευταίο βίντεο ότι η κινούμενη εικόνα μπορεί επίσης να πάρει μια παράμετρο χρονισμού που καθορίζει τη διάρκεια μιας κινούμενης εικόνας. Πού πηγαίνει αυτό; Αυτή είναι μια προαιρετική παράμετρος, όπως και η λειτουργία επιστροφής κλήσης. Αν θέλαμε να το χρησιμοποιήσουμε, θα το βάζαμε στη μέση, οπότε ουσιαστικά:
.animate(propertiesObject, duration, callback);Και υπάρχει και μια άλλη προαιρετική παράμετρος, μια συμβολοσειρά που μπορούμε να περάσουμε για να καθορίσουμε μια τιμή χαλάρωσης.
.animate(propertiesObject, duration, easing, callback);Το jQuery τυχαίνει να είναι δροσερό και έξυπνο για αυτές τις προαιρετικές παραμέτρους. Εάν αφήσετε τα μεσαία δύο και απλώς περάσετε την επιστροφή κλήσης, μπορεί να πει αυτό που περνάτε είναι μια συνάρτηση, όχι ένας αριθμός ή μια συμβολοσειρά, οπότε γνωρίζει ότι εννοείτε μια συνάρτηση επανάκλησης. Δεν χρειάζεται να δώσετε ψευδείς τιμές ή οτιδήποτε άλλο. Αυτό είναι καλό σχέδιο API!
Όταν κοιτάτε την τεκμηρίωση jQuery, το δείχνουν ως εξής:
.animate (ιδιότητες (, διάρκεια) (, χαλάρωση) (, πλήρης))
Στη συνέχεια αμέσως μετά εξηγήστε τους αναμενόμενους τύπους.
Ωστόσο, πίσω στις επιστροφές. Μπορείτε να είστε πολύ ένθετοι. Φανταστείτε να βάλετε ένα άλλο κινούμενο σχέδιο στη λειτουργία επανάκλησης και ότι το κινούμενο σχέδιο έχει τη δική του επανάκληση. Αυτό είναι απολύτως λογικό, καθώς μπορεί να θέλετε να κάνετε κινούμενα σχέδια πολλαπλών βημάτων. Απλά πρέπει να μείνετε οργανωμένοι.
Δείτε το στυλό 450c5810be27a9a8946cb8012cbd1213 του Chris Coyier (@chriscoyier) στο CodePen
Απλώς χρησιμοποιούμε κινούμενα σχέδια ως παράδειγμα εδώ. Ίσως μια πιο συνηθισμένη χρήση των λειτουργιών επανάκλησης είναι το Ajax. Το Ajax είναι όταν το πρόγραμμα περιήγησης ζητά έναν άλλο πόρο χωρίς ανανέωση της σελίδας. Αυτό μπορεί να πάρει ένα εντελώς άγνωστο χρονικό διάστημα. Εξαρτάται από το εύρος ζώνης και τον λανθάνοντα χρόνο και το μέγεθος του αρχείου και τις συνθήκες σφάλματος και όλα τα είδη. Πιθανότατα δεν μπορείτε να κάνετε τίποτα με αυτό το αίτημα Ajax έως ότου λάβετε κάτι πίσω ή διαφορετικά περισσότερες πληροφορίες. Οι λειτουργίες επανάκλησης είναι ιδανικές για αυτό, και θα το εξετάσουμε αργότερα.