Zadanie: napisz debounce
Najpierw odpowiedz na głos lub w myślach, potem porównaj.
Odpowiedź
Debounce przesuwa wykonanie funkcji do chwili, gdy przez określony czas nie pojawi się następne wywołanie. Poniżej wersja trailing, bez wywołania na początku serii.
JavaScript
function debounce(fn, wait) {
let timer;
function wrapped(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), wait);
}
wrapped.cancel = () => clearTimeout(timer);
return wrapped;
}Doprecyzowanie: zwykła funkcja zachowuje this wywołującego; timeout zamyka ostatnie argumenty. Przy sprzątaniu wywołuję cancel.
Pułapka: tworzenie nowej debounced funkcji przy każdym zdarzeniu uniemożliwia współdzielenie timera. To podstawowy wariant do rozmowy, bez leading, maxWait i zwracania Promise.
Jak poszło? Bądź szczery — „Jeszcze nie” dodaje pytanie do powtórki.
Powiązane pytania
- What is event bubbling and throttling? — JavaScript
Przećwicz w kodzie
- Napisz debounce — uruchamia testy w przeglądarce