Debounce vs Throttle di JavaScript: Rahasia Kolom Pencarian Cepat

Jangan Biarkan User Membom Server-Mu

Saat membuat fitur Live Search (Pencarian Langsung) di React atau JavaScript, pemula biasanya langsung memasang fungsi Fetch API ke dalam *event* onKeyUp. Masalahnya: Jika pengguna ingin mencari kata "SEPATU", mereka akan mengetik 6 huruf. Kodemu akan mengirimkan 6 request API ke server dalam waktu kurang dari 1 detik! (Cari 'S', cari 'SE', dst).

Jika webmu diakses 1.000 orang bersamaan, servermu akan meledak karena kebanjiran *request* sampah. Untuk mengatasi ini, *Senior Developer* menggunakan teknik Debounce atau Throttle.

1. Debounce (Menunggu Sampai User Berhenti)

Debounce adalah teknik menunda eksekusi sebuah fungsi, dan hanya menjalankannya jika pengguna sudah berhenti melakukan aksinya selama waktu tertentu (misalnya 500 milidetik).

• Analogi: Pintu *Lift* (Elevator). Pintu lift akan tertutup dalam 5 detik. Tapi, jika sebelum 5 detik ada orang baru yang masuk, timer-nya di-reset ke 0 lagi. Pintu hanya akan tertutup jika sudah tidak ada lagi orang yang masuk selama 5 detik penuh.
• Kapan Digunakan: Sangat wajib dipakai untuk kotak Live Search atau Form Auto-Save. API hanya akan menembak server setelah *user* selesai mengetik kata "SEPATU" dan jari mereka diam selama 0.5 detik. Server jadi sangat lega!

2. Throttle (Membatasi Kecepatan Maksimal)

Throttle adalah teknik membatasi eksekusi fungsi agar hanya boleh berjalan maksimal 1 kali dalam rentang waktu tertentu (misalnya setiap 1 detik), tidak peduli seberapa brutal user melakukan aksinya.

• Analogi: Minum air dari botol. Sekuat apapun kamu meremas botolnya, air yang keluar melalui ujung leher botol memiliki batas kecepatan maksimal yang konstan.
• Kapan Digunakan: Sangat cocok untuk mendeteksi *event* Window Scroll atau *Resize*. Saat pengguna men-scroll halaman ke bawah, *event scroll* bisa terpicu ratusan kali per detik. Dengan *Throttle*, kamu bisa memaksanya hanya menembak fungsi pengecekan 1 kali setiap 0.5 detik. Animasi webmu akan bebas dari *lag*!

Kesimpulan Singkat

Tidak perlu menulis fungsi ini dari nol secara manual. Kamu bisa menggunakan library ringan seperti Lodash yang sudah menyediakan fungsi _.debounce() dan _.throttle() yang sangat teruji, atau menggunakan Custom Hook (seperti useDebounce) jika kamu memakai React.