JS Debounce Throttle

Ringkasan

Debounce & throttle membatasi seberapa sering fungsi jalan — penting untuk resize/scroll/input event.

Konsep Dasar

• Debounce: jalankan hanya setelah aktivitas berhenti N ms (contoh: search-as-you-type).
• Throttle: jalankan maksimal 1x per N ms (contoh: scroll handler).
• Keduanya cegah jank & request berlebih.

Cara Kerja / Struktur

js

function debounce(fn, ms){
  let t; return (...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a), ms); };
}
const onType = debounce(q => search(q), 300);
input.addEventListener("input", e => onType(e.target.value));

Catatan Implementasi

• Debounce untuk API call saat mengetik; throttle untuk event berotasi tinggi.
• leading/trailing opsi kapan pertama kali jalan.

Kesalahan Umum

• Pakai throttle di autocomplete (seharusnya debounce).
• Lupa clearTimeout di debounce → tetap jalan berkali-kali.

Glosarium

• Debounce: tunda eksekusi sampai diam.
• Throttle: batasi rate maksimal.

Referensi

• DOM, Event Handling