Napisz debounce
Debounce przesuwa wykonanie funkcji do chwili, gdy przez określony czas nie pojawi się następne wywołanie. Napisz debounce(fn, wait) w wersji trailing, bez wywołania na początku serii.
Zwrócona funkcja ma zachować this wywołującego i ostatnie argumenty, a metoda cancel() ma anulować zaplanowane wywołanie (przydatne przy sprzątaniu).
To podstawowy wariant do rozmowy, bez leading, maxWait i zwracania Promise.
Przećwiczysz
- Zarządzać timerem w domknięciu
- Zachować this i argumenty
- Udostępnić cancel
Przykłady
- d(1); d(2); d(3) // w odstępach krótszych niż wait→ fn wywołane raz, z argumentem 3, po wait ms ciszy
Testy (5)
Testy napisane na podstawie opisu z karty (wariant trailing, this, ostatnie argumenty, cancel). Używają prawdziwych timerów, więc trwają ułamek sekundy.
wywołuje fn raz, po ciszy, z ostatnimi argumentami
const calls = [];
const d = debounce((...args) => calls.push(args), 30);
d(1); d(2); d(3);
assert.deepEqual(calls, [], 'fn nie powinno być wywołane od razu');
await sleep(80);
assert.deepEqual(calls, [[3]]);kolejne wywołanie przesuwa termin
const calls = [];
const d = debounce(x => calls.push(x), 60);
d('a');
await sleep(40);
d('b');
await sleep(40);
assert.deepEqual(calls, [], '40 ms po drugim wywołaniu nie minął jeszcze czas wait');
await sleep(70);
assert.deepEqual(calls, ['b']);zachowuje this wywołującego
let seen;
const counter = { name: 'licznik', run: debounce(function () { seen = this && this.name; }, 10) };
counter.run();
await sleep(50);
assert.equal(seen, 'licznik');cancel anuluje zaplanowane wywołanie
let calls = 0;
const d = debounce(() => calls++, 20);
d();
assert.equal(typeof d.cancel, 'function', 'zwrócona funkcja powinna mieć metodę cancel');
d.cancel();
await sleep(60);
assert.equal(calls, 0);osobne serie wywołują fn osobno
const calls = [];
const d = debounce(x => calls.push(x), 20);
d(1);
await sleep(60);
d(2);
await sleep(60);
assert.deepEqual(calls, [1, 2]);Powiązane pytania
Dokumentacja
Źródło: Full Stack / JS — karta z zadaniem — Polecenie i rozwiązanie wzorcowe pochodzą z karty; testy napisano na podstawie jej opisu.