Debounce a throttle — implementacja od podstaw
Budowanie niewielkich narzędzi debounce i throttle. Ćwiczenie wariantów trailing i leading oraz poznanie sytuacji, w których warto wybrać każdy z nich
Debounce a throttle — implementacja od podstaw to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 3 lekcji w sumie.
Przegląd
Cel: kontrolować często występujące zdarzenia.
- Debounce: czeka na chwilę bez zdarzeń, a następnie uruchamia działanie raz
- Throttle: uruchamia działanie najwyżej raz w danym przedziale czasu
- Wywołania wiodące i końcowe
- Niewielkie, czytelne funkcje pomocnicze
Debounce (końcowe)
Debounce końcowe resetuje timer przy każdym zdarzeniu i uruchamia działanie raz, gdy sytuacja się uspokoi.
// Debounce (trailing): run once after events stop
function debounce(fn, wait) {
let t = null;
return function (...args) {
clearTimeout(t);
t = setTimeout(function () {
fn.apply(null, args);
}, wait);
};
}
// Simulate rapid events: only the last triggers the call
const debouncedLog = debounce(function (msg) {
console.log("debounced:", msg);
}, 10);
for (let i = 0; i < 5; i++) {
setTimeout(function () {
debouncedLog("final after bursts");
}, i * 3);
}
Debounce (wiodące)
Debounce wiodące uruchamia działanie natychmiast, a następnie blokuje powtórzenia do końca okresu ciszy.
// Debounce (leading): first call fires immediately, then ignore until quiet
function debounceLeading(fn, wait) {
let t = null;
return function (...args) {
if (t === null) {
fn.apply(null, args);
}
clearTimeout(t);
t = setTimeout(function () {
t = null;
}, wait);
};
}
// Demo: first call prints quickly; later bursts are ignored until quiet
const firstTap = debounceLeading(function (x) {
console.log("leading:", x);
}, 12);
for (let i = 0; i < 4; i++) {
setTimeout(function () {
firstTap("first-then-wait");
}, i * 3);
}
Throttle (wiodące)
Throttle ogranicza liczbę wywołań do jednego w każdym przedziale czasu, pomijając nadmiarowe wywołania.
// Throttle (leading): at most once per interval
function throttle(fn, wait) {
let last = 0;
return function (...args) {
const now = Date.now();
if (now - last >= wait) {
last = now;
fn.apply(null, args);
}
};
}
// Demo: many events, but prints at most once every 10ms
const throttled = throttle(function (n) {
console.log("throttled:", n);
}, 10);
for (let i = 0; i < 10; i++) {
setTimeout(function () {
throttled(i);
}, i * 2);
}
Throttle (końcowe)
Throttle końcowe zapewnia, że na końcu przedziału czasu zostanie użyta najnowsza wartość.
// Throttle (trailing): schedule the last call within the window
function throttleTrailing(fn, wait) {
let last = 0;
let timer = null;
let queuedArgs = null;
function invoke(args) {
last = Date.now();
fn.apply(null, args);
}
return function (...args) {
const now = Date.now();
const remaining = wait - (now - last);
if (remaining <= 0) {
// Window passed: run now
clearTimeout(timer);
timer = null;
queuedArgs = null;
invoke(args);
} else {
// Queue the latest args to run at the end of the window
queuedArgs = args;
clearTimeout(timer);
timer = setTimeout(function () {
timer = null;
if (queuedArgs) {
invoke(queuedArgs);
queuedArgs = null;
}
}, remaining);
}
};
}
// Demo: last value in a burst is printed after the window
const trail = throttleTrailing(function (x) {
console.log("trail:", x);
}, 10);
for (let i = 0; i < 6; i++) {
setTimeout(function () {
trail("v" + i);
}, i * 3);
}
Kiedy używać którego mechanizmu?
Wybór:
- Debounce: wyszukiwanie podczas pisania, zmiana rozmiaru — uruchomienie po zakończeniu działania użytkownika.
- Throttle: przewijanie i przeciąganie — ograniczenie wywołań do stałego rytmu.
- Wiodące wywołanie zapewnia natychmiastową reakcję, a końcowe pozwala przechwycić ostatnią wartość.
Quiz: debounce kontra throttle
Szybkie sprawdzenie: ograniczanie wywołań w przedziale czasu.
Podsumowanie
Podsumowanie: utworzono debounce końcowe i wiodące, prosty throttle wiodący oraz lekką wersję throttle końcowego. Debounce należy wybierać, gdy działanie ma nastąpić „po zakończeniu działania użytkownika”, a throttle — gdy potrzebny jest „stały rytm”.
Często zadawane pytania
Czy lekcja „Debounce a throttle — implementacja od podstaw” jest bezpłatna?
Tak — pełny tekst „Debounce a throttle — implementacja od podstaw” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Debounce a throttle — implementacja od podstaw”?
Budowanie niewielkich narzędzi debounce i throttle. Ćwiczenie wariantów trailing i leading oraz poznanie sytuacji, w których warto wybrać każdy z nich Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.
Ile czasu zajmuje lekcja „Debounce a throttle — implementacja od podstaw”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?
Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- setTimeout, setInterval i dryf czasomierza
- Debounce a throttle — implementacja od podstaw
- Synchronizacja animacji — wprowadzenie do pętli zależnych od czasu