Afvis JavaScript - Sådan får du din JS til at vente
Afvisningsmetoder udføres ikke, når de påberåbes. I stedet venter de på en forudbestemt tid, før de udføres. Hvis den samme metode kaldes igen, annulleres den foregående, og timeren genstartes.
Her er en kort videotur gennem, hvor jeg laver en afvisningsmetode:
Og her er kildekoden til videoundervisningen:
Lad os se på koden mere detaljeret nu.
Antag, at du har en knap kaldet denne:
Click me
Og i din JS-fil har du noget som dette:
document.getElementById('myBtn').addEventListener('click', () => { console.log('clicked'); })
Hver gang du klikker på din knap, vil du se en besked i din konsol, der siger clicked
.
Lad os tilføje en afvisningsmetode til vores click
begivenhedslytter her:
document.getElementById('myBtn').addEventListener('click', debouce(() => { console.log('click'); }, 2000))
Afvisningsmetoden her tager to argumenter, callback
& wait
. callback
er den funktion, du vil udføre, mens det wait
er den konfigurerbare tidsperiode, hvorefter du vil have din callback
udført.
Her er vores callback
metode simpelthen console.log('click');
og wait
er 2000 milliseconds
.
Så givet denne afvisningsmetode, der tager to parametre callback
& wait
, lad os definere debounce
:
function debounce(callback, wait) { let timerId; return (...args) => { clearTimeout(timerId); timerId = setTimeout(() => { callback(...args); }, wait); }; }
Funktionen debounce
har to parametre: tilbagekaldelsen (som er den funktion, vi vil udføre) og wait
perioden (efter hvor meget forsinkelse vi vil udføre vores tilbagekaldelse).
Inde i funktionen returnerer vi simpelthen en funktion, som er følgende:
let timerId; return (...args) => { clearTimeout(timerId); timerId = setTimeout(() => { callback(...args); }, wait); };
Hvad denne funktion gør er at påkalde vores callback
metode efter et bestemt tidsrum. Og hvis den samme metode i løbet af denne periode påberåbes igen, annulleres den tidligere funktion, og timeren nulstilles og starter igen.
Og det er det! Alt hvad du behøver at vide om, hvad debounce er.
Her er en anden bonusvideo om lukninger, fordi jeg brugte en closure
inde i min debounce
funktion.
Fortæl mig det på Twitter, hvis du var i stand til at finde brugen af lukning inden for afvisningsmetoden.
God kodning, alle sammen.