Debounce ja throttle — toteutus itse
Rakenna pienet debounce- ja throttle-apufunktiot. Harjoittele trailing- ja leading-versioita ja opi, milloin kumpaakin kannattaa käyttää
Debounce ja throttle — toteutus itse on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 3 oppituntia.
Yleiskatsaus
Tavoite: Hallitkaa usein toistuvia tapahtumia.
- Debounce: odotetaan tapahtumien hiljentymistä ja suoritetaan sitten kerran
- Throttle: suoritetaan enintään kerran aikavälissä
- Leading- ja trailing-kutsut
- Pienet, selkeät apufunktiot
Debounce (trailing)
Trailing debounce nollaa ajastimen jokaisen tapahtuman yhteydessä ja suoritetaan kerran, kun tapahtumat rauhoittuvat.
// 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 (leading)
Leading debounce suoritetaan heti ja estää sitten toistot, kunnes hiljainen jakso päättyy.
// 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 (leading)
Throttle rajoittaa kutsut yhteen kussakin aikavälissä ja jättää ylimääräiset kutsut pois.
// 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 (trailing)
Trailing throttle varmistaa, että saatte silti viimeisimmän arvon aikavälin lopussa.
// 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);
}
Milloin kumpaa käytetään?
Valinta:
- Debounce: kirjoittamisen aikainen haku ja koon muuttaminen — suorittakaa kun käyttäjä on lopettanut.
- Throttle: vieritys ja raahaus — rajoittakaa kutsut tasaiseen tahtiin.
- Käyttäkää leading-vaihtoehtoa välitöntä palautetta varten ja trailing-vaihtoehtoa viimeisen arvon tallentamiseen.
Debounce vai throttle -koe
Pikatarkistus: Kutsujen rajoittaminen aikavälissä.
Kertaus
Kertaus: Kirjoititte trailing- ja leading-debouncen, yksinkertaisen leading-throttlen ja kevyen trailing-throttlen. Valitkaa debounce, kun haluatte suorittaa toiminnon käyttäjän lopetettua, ja throttle, kun haluatte tasaisen rytmin.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 59
- Oppitunnit
- 200
Usein kysytyt kysymykset
Onko oppitunti ”Debounce ja throttle — toteutus itse” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Debounce ja throttle — toteutus itse”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”Debounce ja throttle — toteutus itse”?
Rakenna pienet debounce- ja throttle-apufunktiot. Harjoittele trailing- ja leading-versioita ja opi, milloin kumpaakin kannattaa käyttää Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/3.
Kuinka kauan ”Debounce ja throttle — toteutus itse”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?
Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- setTimeout, setInterval ja ajastinten ajautuminen
- Debounce ja throttle — toteutus itse
- Animaation ajoitus — johdatus aikaperustaisiin silmukoihin