Επεξήγηση Debounce - Πώς να κάνετε το JavaScript σας να περιμένει τον χρήστη σας να ολοκληρώσει την πληκτρολόγηση

Οι συναρτήσεις αποσυναρμολόγησης στο JavaScript είναι συναρτήσεις υψηλότερης τάξης που περιορίζουν το ρυθμό με τον οποίο καλείται άλλη συνάρτηση.

Μια συνάρτηση υψηλότερης τάξης είναι μια συνάρτηση που είτε παίρνει μια συνάρτηση ως όρισμα είτε επιστρέφει μια συνάρτηση ως μέρος της δήλωσης επιστροφής της. Η λειτουργία απομάκρυνσης κάνει και τα δύο.

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

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

Αντ 'αυτού, θέλετε myFuncνα εκτελέσετε όταν έχουν περάσει τουλάχιστον 2 δευτερόλεπτα από την τελευταία φορά που πληκτρολογήσατε κάτι.

Εδώ μπορεί να παίξει μια αναπήδηση. Αντί να περάσετε myFuncστον ακροατή των εκδηλώσεων, θα περάσετε στο ντεμπούτο. Το ίδιο το debounce θα ληφθεί myFuncως επιχείρημα, μαζί με τον αριθμό 2000.

Τώρα, όποτε κάνετε κλικ στο κουμπί, myFuncθα εκτελεστεί μόνο εάν έχουν παρέλθει τουλάχιστον 2 δευτερόλεπτα πριν από την τελευταία myFuncκλήση.

Πώς να εφαρμόσετε μια συνάρτηση απόρριψης

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

function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); timeout = setTimeout( callback, delay ); } }

Ξεκινώντας με τη γραμμή 1, δηλώσαμε μια νέα συνάρτηση με το όνομα debounce. Αυτή η νέα συνάρτηση έχει δύο παραμέτρους, callbackκαι delay.

function debounce( callback, delay ) { } 

callback είναι οποιαδήποτε λειτουργία που πρέπει να περιορίσει τον αριθμό των φορών που εκτελεί.

delayείναι ο χρόνος (σε χιλιοστά του δευτερολέπτου) που πρέπει να περάσει για να μπορέσει callbackνα εκτελεστεί ξανά.

function debounce( callback, delay ) { let timeout; }

Στη γραμμή 2, δηλώνουμε μια μη αρχικοποιημένη μεταβλητή που ονομάζεται timeout.

Αυτή η νέα μεταβλητή διατηρεί την timeoutIDεπιστροφή όταν καλούμε setTimeoutαργότερα στη debounceλειτουργία μας .

function debounce( callback, delay ) { let timeout; return function() { } }

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

Ένα κλείσιμο σε JavaScript πραγματοποιείται κάθε φορά που μια εσωτερική λειτουργία διατηρεί την πρόσβαση στο λεξικό πεδίο της εξωτερικής της λειτουργίας, παρόλο που η εξωτερική λειτουργία έχει ολοκληρωθεί. Αν θέλετε να μάθετε περισσότερα σχετικά με το κλείσιμο, μπορείτε να διαβάσετε το Κεφάλαιο 7 του "You Don't Know JS" του Kyle Simpson
function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); } }

Στη γραμμή 4, καλούμε τη clearTimeoutμέθοδο του WindowOrWorkerGlobalScopemixin. Αυτό θα διασφαλίσει ότι κάθε φορά που καλούμε τη debounceλειτουργία μας , timeoutγίνεται επαναφορά και ο μετρητής μπορεί να ξεκινήσει ξανά.

Η WindowOrWorkerGlobalScopeΜίχίη της JavaScript μας δίνει πρόσβαση σε μερικές γνωστές μεθόδους, όπως setTimeout, clearTimeout, setInterval, clearInterval, και fetch.

Μπορείτε να μάθετε περισσότερα γι 'αυτό διαβάζοντας αυτό το άρθρο.

function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); timeout = setTimeout( callback, delay ); } }

Στη γραμμή 5, φτάσαμε στο τέλος της debounceυλοποίησης της λειτουργίας μας .

Αυτή η γραμμή κώδικα κάνει μερικά πράγματα. Η πρώτη ενέργεια αποδίδει μια τιμή στη timeoutμεταβλητή που δηλώσαμε στη γραμμή 2. Η τιμή είναι μια timeoutIDπου επιστρέφεται όταν καλούμε setTimeout. Αυτό θα μας επιτρέψει να αναφέρουμε το χρονικό όριο που δημιουργείται κάνοντας κλήση, setTimeoutώστε να μπορούμε να το επαναφέρουμε κάθε φορά που χρησιμοποιείται η debounceλειτουργία μας .

Η δεύτερη ενέργεια που εκτελείται είναι η κλήση setTimeout. Αυτό θα δημιουργήσει ένα χρονικό όριο που θα εκτελέσει callback(το όρισμα συνάρτησης που μεταβιβάστηκε στη debounceλειτουργία μας ) μόλις delayπαρέλθει το όρισμα αριθμού που μεταβιβάστηκε στη debounceλειτουργία μας

Δεδομένου ότι χρησιμοποιούμε ένα χρονικό όριο, callbackθα εκτελεστεί μόνο αν αφήσουμε το χρονικό όριο να φτάσει στο 0. Εδώ debounceμπαίνει η καρδιά της λειτουργίας μας αφού επαναφέρουμε το χρονικό όριο κάθε φορά debounceπου καλείται. Αυτό μας επιτρέπει να περιορίσουμε το ρυθμό εκτέλεσης του myFunc.

Οι γραμμές 5 και 6 περιέχουν μόνο αγκύλες, οπότε δεν θα τα ξεπεράσουμε.

Αυτό είναι. Έτσι debounceλειτουργεί η λειτουργία μας εσωτερικά. Τώρα ας προσθέσουμε στο προηγούμενο παράδειγμά μας από την αρχή. Θα δημιουργήσουμε ένα πεδίο εισαγωγής και θα επισυνάψουμε έναν ακροατή συμβάντων με τη debounceλειτουργία μας ως ένα από τα επιχειρήματά του.

Παράδειγμα πραγματικού κόσμου

Πρώτον, πρέπει να δημιουργήσουμε ένα πεδίο εισαγωγής.

Type something in! 

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

function helloWorld() { console.log("Hello World!") }

Τέλος, πρέπει να επιλέξουμε το πεδίο εισαγωγής που δημιουργήσαμε παραπάνω και να επισυνάψουμε έναν keyupακροατή συμβάντων σε αυτό.

const myInput = document.getElementById("myInput"); myInput.addEventListener( "keyup", debounce( helloWorld, 2000 ) );

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

Ιδιαίτερες ευχαριστίες στο στρατοσκόπιο χρήστη Reddit που βοήθησε στη διόρθωση κάποιου αρχικού κώδικα σε αυτό το άρθρο Εδώ είναι μια λειτουργική επίδειξη που δημιούργησε αυτήν τη debounceλειτουργία στο Repl.it.

Σημειώσεις κλεισίματος

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

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

Αν θέλετε να μάθετε περισσότερα σχετικά με τη JavaScript, ανατρέξτε στον ιστότοπό μου! Δουλεύω για μερικά ωραία πράγματα στο //juanmvega.com.