Afregning forklaret - Sådan får du din JavaScript til at vente på, at din bruger afslutter at skrive
Afvisningsfunktioner i JavaScript er højere ordensfunktioner, der begrænser den hastighed, hvormed en anden funktion bliver kaldt.
En højere ordensfunktion er en funktion, der enten tager en funktion som et argument eller returnerer en funktion som en del af dens returneringserklæring. Vores afvisningsfunktion gør begge dele.Den mest almindelige brugssag til en afvisning er at videregive den som et argument til en begivenhedslytter, der er knyttet til et HTML-element. For at få en bedre forståelse af, hvordan dette ser ud, og hvorfor det er nyttigt, lad os se på et eksempel.
Sig, at du har en funktion med navnet, myFunc
der bliver kaldt, hver gang du skriver noget i et indtastningsfelt. Efter at have gennemgået kravene til dit projekt, beslutter du, at du vil ændre oplevelsen.
I stedet vil myFunc
du udføre, når der er gået mindst 2 sekunder siden sidste gang du skrev noget.
Det er her, en afvisning kan komme i spil. I stedet for at videregive myFunc
til begivenhedslytteren, vil du give afvisning. Selve afvisningen ville derefter tage myFunc
som et argument sammen med tallet 2000.
Hver gang du klikker på knappen, myFunc
vil den kun udføres, hvis der er gået mindst 2 sekunder, inden sidste gang myFunc
blev kaldt.
Sådan implementeres en afvisningsfunktion
Fra start til slut tager det kun 7 linjer kode at implementere en afvisningsfunktion. Resten af dette afsnit fokuserer på de 7 kodelinjer, så vi kan se, hvordan vores afvisningsfunktion fungerer internt.
function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); timeout = setTimeout( callback, delay ); } }
Startende med linje 1 har vi erklæret en ny funktion med navnet debounce
. Denne nye funktion har to parametre, callback
og delay
.
function debounce( callback, delay ) { }
callback
er enhver funktion, der skal begrænse antallet af gange, den udføres.
delay
er tiden (i millisekunder), der skal gå, før den callback
kan udføres igen.
function debounce( callback, delay ) { let timeout; }
På linje 2 erklærer vi en ikke-initialiseret variabel med navnet timeout
.
Denne nye variabel holder timeoutID
returneret, når vi setTimeout
senere kalder op i vores debounce
funktion.
function debounce( callback, delay ) { let timeout; return function() { } }
På linje 3 returnerer vi en anonym funktion. Denne anonyme funktion lukkes over timeout
variablen, så vi kan bevare adgangen til den, selv efter at det første opkald til debounce
er færdig med at blive udført.
function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); } }
På linje 4 kalder vi clearTimeout
metoden til WindowOrWorkerGlobalScope
mixin. Dette vil sikre, at hver gang vi kalder vores debounce
funktion, timeout
nulstilles, og tælleren kan starte igen.
Den WindowOrWorkerGlobalScope
MixIn af JavaScript giver os adgang til et par velkendte metoder, ligesom setTimeout
, clearTimeout
, setInterval
, clearInterval
, og fetch
.
Du kan lære mere om det ved at læse denne artikel.
function debounce( callback, delay ) { let timeout; return function() { clearTimeout( timeout ); timeout = setTimeout( callback, delay ); } }
På linje 5 har vi nået slutningen af vores debounce
funktionsimplementering.
Denne kodelinje gør et par ting. Den første handling er at tildele en værdi til den timeout
variabel, som vi erklærede på linje 2. Værdien er en, timeoutID
der returneres, når vi ringer setTimeout
. Dette giver os mulighed for at henvise til den timeout, der oprettes ved at ringe, setTimeout
så vi kan nulstille den hver gang vores debounce
funktion bruges.
Den anden udførte handling kalder setTimeout
. Dette skaber en timeout, der udføres callback
(funktionsargumentet videregivet til vores debounce
funktion), når delay
nummerargumentet videregivet til vores debounce
funktion er forløbet.
Da vi bruger en timeout, callback
vil den kun udføres, hvis vi tillader, at timeout'en når 0. Dette er, hvor hjertet i vores debounce
funktion kommer i spil, da vi nulstiller timeout, hver gang debounce
der kaldes. Dette er det, der giver os mulighed for at begrænse udførelsesgraden på myFunc
.
Linje 5 og 6 indeholder kun parenteser, så vi går ikke over dem.
Det er det. Sådan fungerer vores debounce
funktion internt. Lad os nu tilføje vores tidligere eksempel fra starten. Vi skal oprette et inputfelt og vedhæfte en begivenhedslytter med vores debounce
funktion som et af dens argumenter.
Virkelig verdenseksempel
Først skal vi oprette et inputfelt.
Type something in!
Dernæst skal vi oprette en funktion, som vi vil udføre, når vi skriver noget i vores inputfelt.
function helloWorld() { console.log("Hello World!") }
Endelig skal vi vælge det inputfelt, vi oprettede ovenfor, og vedhæfte en keyup
begivenhedslytter til det.
const myInput = document.getElementById("myInput"); myInput.addEventListener( "keyup", debounce( helloWorld, 2000 ) );
Det afslutter vores virkelige verdenseksempel! Hver gang vi skriver noget i vores indtastningsfelt, helloWorld
udføres, hvis der er gået mindst 2 sekunder siden sidste gang vi indtastede noget.
debounce
funktion på Repl.it.
Afsluttende noter
Afvisningsfunktioner er enkle, men alligevel kraftfulde funktioner, der kan have en mærkbar indflydelse på de fleste JavaScript-applikationer.
Mens vores eksempel var sjovt og ligetil, bruger mange store organisationer afvisningsfunktioner til at øge deres applikations ydeevne.
Hvis du vil lære mere om JavaScript, skal du tjekke min hjemmeside! Jeg arbejder på nogle seje ting på //juanmvega.com.