JavaScript Extended #28: Debounce & Throttle

• 06/06/2025
• ariq fadhil
• 11

1. Kenapa Butuh Debounce dan Throttle?

Pada event seperti scroll, resize, atau input, function bisa terpanggil sangat sering. Ini bisa menurunkan performa aplikasi jika tidak dikontrol.

2. Debounce

Debounce menunda eksekusi function sampai user berhenti melakukan aksi selama waktu tertentu.

function debounce(fn, delay) {
  let timeout;

  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn.apply(this, args), delay);
  };
}

Contoh penggunaan pada input search:

const handleSearch = debounce(() => {
  console.log("Cari data...");
}, 500);

3. Throttle

Throttle membatasi agar function hanya bisa dijalankan satu kali dalam interval waktu tertentu.

function throttle(fn, limit) {
  let inThrottle = false;

  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;

      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

4. Kapan Menggunakan Debounce?

• Search input
• Autocomplete
• Resize window

5. Kapan Menggunakan Throttle?

• Scroll event
• Mouse move
• Button spam prevention

6. Ringkasan

• Debounce menunggu sampai aksi berhenti
• Throttle membatasi frekuensi eksekusi
• Keduanya sangat penting untuk optimasi performa frontend

Di part berikutnya, kita akan membahas Web Worker dan background task.