Debounce JavaScripti - kuidas panna oma JS ootama

Tühistamismeetodeid ei käivitata, kui neid kutsutakse. Selle asemel ootavad nad enne täitmist ettemääratud aega. Kui sama meetodit uuesti kutsutakse, tühistatakse eelmine ja taimer taaskäivitub.

Siin on lühike videokäik, mille kaudu koostan tagasilükkamismeetodi:

Ja siin on videoõpetuse lähtekood:

Vaatame nüüd koodi täpsemalt.

Oletame, et teil on nupp, mille nimi on järgmine:

Click me

Ja teie JS-failis on midagi sellist:

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

Iga kord, kui klõpsate nuppu, näete oma konsoolis teadet clicked.

Lisame clicksiin oma sündmuste kuulajale levitamismeetodi :

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

Siirdamismeetodil on siin kaks argumenti: callback& wait. callbackon funktsioon, mida soovite käivitada, samas kui see waiton seadistatav ajaperioodi viivitus, mille järel soovite, et teie callbackkäivitataks.

Siin on meie callbackmeetod lihtsalt console.log('click');ja waiton 2000 milliseconds.

Niisiis, arvestades seda debounce-meetodit, mis võtab sisse kaks parameetrit callback& wait, määratleme debounce:

function debounce(callback, wait) { let timerId; return (...args) => { clearTimeout(timerId); timerId = setTimeout(() => { callback(...args); }, wait); }; }

Funktsioon debouncevõtab sisse kaks parameetrit: tagasihelistamine (mis on funktsioon, mida me tahame täita) ja waitperiood (pärast seda, kui palju viivitusi me tahame oma tagasihelistamiseks täita).

Funktsiooni sees tagastame lihtsalt funktsiooni, mis on järgmine:

let timerId; return (...args) => { clearTimeout(timerId); timerId = setTimeout(() => { callback(...args); }, wait); };

Selle funktsiooni kasutamine on meie callbackmeetodi kasutamine teatud aja möödudes. Ja kui selle ajavahemiku jooksul kasutatakse sama meetodit uuesti, tühistatakse eelmine funktsioon ning taimer lähtestatakse ja käivitatakse uuesti.

Ja ongi kõik! Kõik, mida peate teadma, mis on tagasilükkamine.

Siin on veel üks boonusvideo sulgemiste kohta, kuna kasutasin closureoma debouncefunktsiooni sees .

Andke mulle twitteris teada, kas teil õnnestus sulgemisviisi leida tagasilükkamismeetodi sees.

Head kodeerimist, kõik.