Debounce vs Throttle

TL;DR: Debounce dan throttle adalah teknik mengatur frekuensi eksekusi fungsi pada event yang sering terpicu (ketik, scroll, resize). Debounce menunggu hingga jeda aktivitas sebelum menjalankan fungsi sekali, sementara throttle menjalankan fungsi paling sering satu kali per interval waktu. Keduanya menjaga halaman tetap mulus dan hemat sumber daya.

Pada fitur seperti kotak pencarian live atau animasi saat scroll, event bisa terpicu puluhan kali per detik. Tanpa pembatasan, browser kewalahan dan halaman terasa tersendat. Di sinilah dua teknik ini berperan.

Apa itu Debounce dan Throttle?

Debounce menunda eksekusi sampai aktivitas berhenti selama durasi tertentu. Contoh: pencarian yang baru memanggil API setelah pengguna berhenti mengetik 300 milidetik. Throttle membatasi eksekusi menjadi maksimal sekali per interval, misalnya memperbarui posisi scroll paling sering setiap 100 milidetik. Keduanya mengurangi beban kerja yang berkaitan dengan Long Tasks, pekerjaan JavaScript panjang yang membekukan antarmuka.

Kapan Pakai yang Mana

Kenapa Penting?

Untuk website bisnis yang mengejar pengalaman cepat, debounce dan throttle adalah cara murah menjaga interaktivitas tanpa menambah server atau memperbesar anggaran. Keduanya membantu menjaga metrik responsivitas tetap baik, yang menjadi bagian dari Core Web Vitals. Dokumentasi MDN bahkan menyarankan throttle untuk event scroll yang volumenya tinggi.

Pertanyaan Umum

Apakah debounce dan throttle sama?

Tidak. Debounce menunggu jeda lalu menjalankan sekali, cocok untuk aksi yang hanya perlu hasil akhir. Throttle menjalankan secara berkala selama event berlangsung, cocok untuk pembaruan yang harus terasa berkelanjutan.

Apakah saya perlu library untuk ini?

Tidak wajib. Keduanya bisa ditulis dalam beberapa baris JavaScript, meski library seperti Lodash menyediakan versi siap pakai yang teruji.