← JavaScript61 / 69

Debounce dengan timer

Kalau kamu memanggil API di setiap ketikan, mengetik 'sepatu' berarti 6 request. Debounce menunda eksekusi sampai pengguna berhenti mengetik sejenak: setiap ketikan membatalkan timer sebelumnya. Ini teknik optimasi paling sering diminta pada fitur pencarian. Jangan tertukar dengan throttle: debounce menunggu sampai aktivitas berhenti, sedangkan throttle membatasi frekuensi eksekusi pada rentang waktu tetap.

👀 Contoh dulu

function debounce(fn, jeda) {
  let timer;                       // diingat lewat closure
  return function (...args) {
    clearTimeout(timer);           // batalkan jadwal sebelumnya
    timer = setTimeout(() => fn(...args), jeda);
  };
}

const simpan = debounce((v) => console.log('Menyimpan: ' + v), 200);

simpan('a');
simpan('ab');
simpan('abc');   // hanya yang terakhir yang benar-benar jalan

Hasilnya: Menyimpan: abc

💡 Tiga pemanggilan, satu eksekusi. Tanpa debounce, fitur pencarian mengirim satu request per ketikan.

📝 Sekarang giliranmu

Buat fungsi debounce(fn, jeda) yang memakai clearTimeout dan setTimeout untuk menunda pemanggilan. Uji dengan memanggil hasilnya beberapa kali.

Preview

← Sebelumnya Berikutnya →