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 clickbegivenhedslytter her:

document.getElementById('myBtn').addEventListener('click', debouce(() => { console.log('click'); }, 2000))

Afvisningsmetoden her tager to argumenter, callback& wait. callbacker den funktion, du vil udføre, mens det waiter den konfigurerbare tidsperiode, hvorefter du vil have din callbackudført.

Her er vores callbackmetode simpelthen console.log('click');og waiter 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 debouncehar to parametre: tilbagekaldelsen (som er den funktion, vi vil udføre) og waitperioden (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 callbackmetode 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 closureinde i min debouncefunktion.

Fortæl mig det på Twitter, hvis du var i stand til at finde brugen af ​​lukning inden for afvisningsmetoden.

God kodning, alle sammen.