Metodele de respingere nu se execută atunci când sunt invocate. În schimb, așteaptă un timp prestabilit înainte de a executa. Dacă se apelează din nou aceeași metodă, cea anterioară este anulată și temporizatorul repornește.
Iată o scurtă plimbare video prin care fac o metodă de respingere:
Iată codul sursă al tutorialului video:
Să ne uităm la cod mai detaliat acum.
Să presupunem că aveți un buton numit astfel:
<button id="myBtn">Click me</button>
Și în fișierul dvs. JS aveți așa ceva:
document.getElementById('myBtn').addEventListener('click', () => {
console.log('clicked');
})
De fiecare dată când faceți clic pe butonul dvs., veți vedea un mesaj în consola dvs. care spune clicked
.
Să adăugăm o metodă de debounce la a noastră click
ascultător de evenimente aici:
document.getElementById('myBtn').addEventListener('click', debouce(() => {
console.log('click');
}, 2000))
Metoda debounce aici include două argumente, callback
& wait
. callback
este funcția pe care doriți să o executați, în timp ce wait
este intervalul de timp configurabil după care doriți ca callback
a fi executat.
Aici callback
metoda este pur și simplu console.log('click');
si wait
este 2000 milliseconds
.
Deci, având în vedere această metodă de dezabonare, care include doi parametri callback
& wait
, să definim debounce
:
function debounce(callback, wait) {
let timerId;
return (...args) => {
clearTimeout(timerId);
timerId = setTimeout(() => {
callback(...args);
}, wait);
};
}
Funcţie debounce
preia doi parametri: callback (care este funcția pe care dorim să o executăm) și wait
perioadă (după câtă întârziere dorim să executăm apelul nostru).
În interiorul funcției, returnăm pur și simplu o funcție, care este următoarea:
let timerId;
return (...args) => {
clearTimeout(timerId);
timerId = setTimeout(() => {
callback(...args);
}, wait);
};
Ceea ce face această funcție este invocarea noastră callback
metoda după o anumită perioadă de timp. Și dacă în acea perioadă de timp aceeași metodă este invocată din nou, funcția anterioară este anulată și cronometrul este resetat și pornește din nou.
Și asta este! Tot ce trebuie să știți despre ce este debounce.
Iată un alt videoclip bonus despre închideri, pentru că am folosit un closure
în interiorul meu debounce
funcţie.
Anunță-mă stare de nervozitate dacă ați reușit să găsiți utilizarea închiderii în interiorul metodei debounce.
Codificare fericită, tuturor.
#Debounce #JavaScript #Wait
Debounce JavaScript – How to Make your JS Wait Up