Debounce JavaScript - How To Make Your JS Wait Up

⌛ Reading Time: 2 minutes

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.