Debounce vs Throttle — Buatan Sendiri
Bangun utilitas debounce dan throttle kecil. Berlatih dengan variasi trailing dan leading, serta ketahui kapan masing-masing dipilih
Debounce vs Throttle — Buatan Sendiri adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.
Ikhtisar
Tujuan: Mengendalikan peristiwa yang terlalu sering.
- Debounce: tunggu hingga tenang, lalu jalankan sekali
- Throttle: jalankan paling banyak sekali per interval
- Panggilan di awal dan di akhir
- Pembantu kecil yang mudah dibaca
Debounce (akhir)
Debounce di akhir mengatur ulang pengatur waktu pada setiap peristiwa dan berjalan sekali setelah keadaan tenang.
// 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 (awal)
Debounce di awal berjalan segera, lalu memblokir pengulangan hingga jendela tenang berakhir.
// 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 (awal)
Throttle membatasi panggilan menjadi satu per jendela waktu dan membuang panggilan tambahan.
// 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 (akhir)
Throttle di akhir memastikan Anda tetap mendapatkan nilai terbaru pada akhir jendela.
// 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);
}
Kapan menggunakan yang mana?
Pemilihan:
- Debounce: pencarian saat mengetik, pengubahan ukuran — jalankan setelah pengguna berhenti.
- Throttle: pengguliran/penyeretan — batasi panggilan agar lajunya stabil.
- Awal untuk umpan balik langsung; akhir untuk menangkap nilai terakhir.
Kuis debounce dan throttle
Pemeriksaan singkat: Membatasi panggilan per jendela.
Ringkasan
Ringkasan: Anda menulis debounce di akhir dan di awal, throttle di awal yang sederhana, serta throttle di akhir yang ringan. Pilih debounce untuk “setelah pengguna berhenti”, dan throttle untuk “laju stabil”.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Debounce vs Throttle — Buatan Sendiri” gratis?
Ya — teks lengkap “Debounce vs Throttle — Buatan Sendiri” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Debounce vs Throttle — Buatan Sendiri”?
Bangun utilitas debounce dan throttle kecil. Berlatih dengan variasi trailing dan leading, serta ketahui kapan masing-masing dipilih Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai JavaScript Academy?
Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.
Berapa lama pelajaran “Debounce vs Throttle — Buatan Sendiri” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?
Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- setTimeout, setInterval, dan Penyimpangan Pewaktu
- Debounce vs Throttle — Buatan Sendiri
- Pengaturan Waktu Animasi — Pengantar dengan Perulangan Berbasis Waktu