Debounce – Apa bedanya dengan throttle?

Sebagai seorang web developer baik back-end atau front-end pasti sedikit banyak kalian pernah denger istilah Throttle kan? Yaa gampangnya throttle dipake buat membatasi jumlah hit dari sebuah endpoint atau aplikasi oleh satu user / client dalam kurun waktu tertentu, contohnya kita pengen membatasi endpoint api/user cuma bisa diakses 60 kali dalam satu menit maka disini kita bisa pake teknologi throttle. Lalu apa itu debounce?

Debounce

Debounce artinya memantulkan kalo diartiin pake google translate, but secara singkat ada benarnya. Debounce berasal dari konsep elektronik seperti remote tv dimana remote baru akan mengirimkan singnal ketika kamu benar-benar selesai menekan tombol, konsepnya mirip seperti itu.

Kapan harus pakai debounce?

Oke let me explain, sebagai seorang developer front-end yang baik, alangkah lebih baiknya adalah menjaga keharmonisan antara developer FE dan BE ya ngga sih? Salah satunya adalah ini, contoh implementasinya adalah kita mau membuat sebuah input dimana fungsinya untuk mencari data list kecamatan berdasarkan keyword yang diinput oleh user, so what should we do? Aku kasih contoh kasus deh

Contoh Kasus

Sebuah input field memiliki minimum 3 karakter panjang text dengan harapan sistem akan melakukan hit ke api ketika user menyelesaikan mengetik dengan delay 100ms dari input terakhir, soo gimana caranya pake javascript? Gini caranya

1. Pertama kamu haru set dulu sebuah variable global, boleh pake var atau let sesuai kebutuhan

let debounce

2. Pada fungsi trigger utama (bisa diterapkan di listener)

const onChange = () => {
  if(debounce) {
    clearTimeout(debounce)
  }

  debounce = setTimeout(() => {
    fetch('some_stuff')
  },100)
}

3. Yep that's it, simpel kan? Oke mari kita bedah

Bedah

1. Pertama kita harus set variable buat menampung timeout function
2. Kita harus selalu check apakah variable itu sudah ada isinya atau belum, jika sudah gunakan fungsi clearTimeout untuk menghapus queue delay
3. Nah baru deh kamu fill variable tadi, jika udah gaada change secara otomatis variable tidak akan ter-clear maka fetch (main function) akan otomatis ter trigger

Debounce vs Throttle

Singkat kan? Ngga sulit kok buat prevent hal2 semacam flood yang disebabkan oleh front-end app, langkah awalnya ya pake debounce ini, tapi bukan berarti throttle ditinggalin ya, tetep perlu keduanya biar selaras. So that's simple article from me, thanks for reading and see you on the next post.