Debounce dalam 3 Menit

Ada event tertentu yang bisa memicu ratusan kali dalam sekejap. input yang menyala setiap kali kita mengetik satu huruf, atau resize yang terus berjalan selama jendela di-drag. Bila setiap picuan itu langsung menjalankan fungsi yang berat, misal memanggil API atau menghitung ulang sesuatu, aplikasi kita bakal terasa berat.

Di sinilah debounce berguna. Idenya sederhana, tunggu sampai event-nya berhenti dulu, baru jalankan fungsinya sekali. Bila event baru datang sebelum waktu tunggunya habis, hitungannya diulang dari awal.

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

Cara pakainya, bungkus fungsi yang mau kita batasi:

const handleSearch = debounce((query) => {
  console.log('Mencari:', query);
}, 300);

input.addEventListener('input', (e) => handleSearch(e.target.value));

Sekarang handleSearch cuma benar-benar berjalan 300ms setelah pengguna berhenti mengetik. Kalau dia mengetik "react", fungsinya tidak jalan lima kali untuk tiap huruf, tapi sekali saja setelah dia berhenti.

Beberapa kasus yang cocok pakai debounce:

• Kolom pencarian, tunggu pengguna selesai mengetik baru kirim request.
• Auto-save, simpan setelah pengguna berhenti mengedit.
• Validasi form yang perlu memanggil server.

Debounce sering disandingkan dengan throttle, dan keduanya memang mirip. Bedanya, debounce menunggu sampai keadaan tenang dulu baru jalan, sedangkan throttle memastikan fungsi jalan paling banyak sekali tiap rentang waktu tertentu. Bila kamu ingin "tunggu sampai selesai", pakai debounce. Bila kamu ingin "batasi seberapa sering", pakai throttle.