Debounce & Throttle: Kenapa Kolom Search-mu Nge-lag Waktu Diketik Cepat?

Bayangin Siti Bikin Fitur 'Live Search'...

Bayangin Siti bikin fitur pencarian produk yang keren: setiap huruf diketik, hasilnya langsung muncul real-time tanpa perlu tombol "Cari". Kodenya sederhana: event listener onChange di input, lalu langsung fetch ke API.

Waktu Siti mengetik kata "sepatu running" (14 karakter), ternyata browser menembak API sebanyak 14 KALI dalam waktu kurang dari 2 detik — satu tembakan untuk setiap huruf! Server database yang tadinya adem-ayem tiba-tiba megap-megap kebanjiran request, dan hasil pencarian di layar malah berkedip-kedip kacau karena balasan API datang dengan urutan yang tidak menentu.

Masalahnya: Event Browser Terlalu Cerewet

Event seperti mengetik (keyup), scroll, atau menggerakkan mouse (mousemove) bisa terpicu puluhan hingga ratusan kali per detik. Kalau setiap event itu langsung memicu pekerjaan berat (memanggil API, menghitung ulang layout), browser dan server jadi kewalahan sia-sia.

Nah, Di Sinilah 'Debounce' dan 'Throttle' Masuk!

Dua teknik ini sama-sama membatasi seberapa sering sebuah fungsi boleh dijalankan, tapi dengan filosofi yang berbeda:

• Debounce (Tunggu Sampai Diam): Fungsi hanya akan dijalankan setelah pengguna berhenti mengetik selama sekian milidetik. Setiap kali ada ketikan baru, jam pasirnya di-reset ulang dari nol. Cocok untuk Live Search — API baru ditembak sekali, tepat saat Siti selesai mengetik "sepatu running", bukan di setiap hurufnya.
• Throttle (Jatah Sekali per Periode): Fungsi tetap dijalankan secara berkala dengan jarak waktu tetap, walau event-nya terus-menerus terjadi. Cocok untuk Infinite Scroll — biarpun pengguna men-scroll ribuan piksel per detik, cek "apakah sudah sampai bawah halaman?" cukup dijalankan misalnya satu kali tiap 200 milidetik.

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const searchDebounced = debounce(searchProduk, 400);

Intinya: Pakai Debounce saat kamu cuma peduli hasil akhirnya (misal: search, validasi form). Pakai Throttle saat kamu butuh reaksi berkala selama prosesnya berlangsung (misal: scroll, resize window). Salah pilih salah satunya, dan API-mu akan menangis.