Jquery Debounce – Menunda Eksekusi Kode Untuk Beberapa Saat Dengan Jquery.
Kalau kamu pengguna framework front-end seperti vue js atau react js, pasti tidak asing lagi dengan istilah debounce.
Debounce sendiri adalah salah satu teknik untuk menunda eksekusi kode program sampai batas waktu yang telah ditentukan.
Teknik ini bertujuan untuk memberikan kontrol agar proses sebelumnya berjalan terlebih dahulu, setelah itu baru mengeksekusi kode program yang di debounce.
Jquery Debounce
Suatu saat kita akan menemukan kondisi yang mewajibkan kita untuk menggunakan teknik ini agar performa aplikasi tidak terganggu.
Teknik ini biasanya digunakan saat kita membuat fitur pencarian data.
Untuk lebih memahaminya, mimin akan coba memberikan perbandingan antar pencarian data biasa dengan pencarian data yang menggunakan teknik debounce.
Kita akan lihat dari sisi performance nya.
Request Pencarian Data Via Ajax Tanpa Debounce
Kalau kalian membuat sebuah fitur pencarian data yang media nya menggunakan form input dan request pencarian data nya menggunakan ajax, dan request ajax tersebut di trigger saat event on keyup, maka setiap kali kita mengetikan sebuah kata, ajax request nya akan langsung terpanggil.
Setiap kata yang kita ketik, saat itu pula request ajax nya dijalankan, dan inilah salah satu contoh request network nya:
Kalian bisa perhatikan gambar diatas, pada inputan search data saya mengetikkan keyword “sangcahaya.id”, dan pada saat itu pula terdapat request ke server sebanyak 13 kali, jumlah request tersebut sama dengan jumlah total kata dari keyword “sangcahaya.id”.
Bayangkan jika kita memiliki banyak user, dan masing-masing user tersebut melakukan pencarian data, ada berapa jumlah request yang dikirimkan ke server?
Request Pencarian Data Via Ajax Menggunakan Teknik Debounce
Sekarang akan kita bandingkan bagaimana jika kita menggunakan teknik debounce.
Disini saya melakukan debounce atau proses penundaan nya selama 1000ms atau (1 detik), masih dengan mengetikkan keyword yang sama yaitu “sangcahaya.id”, maka hasil request network nya adalah seperti berikut:
Dengan mengetikkan keyword “sangcahaya.id” pada inputan pencarian data nya, hanya terjadi 1 kali request saja.
Kenapa bisa begitu? Karena sebelumnya ada proses penundaan terlebih dahulu, sistem akan menunggu si user selesai mengetikkan keyword nya, baru setelah itu melakukan request ajax ke server.
Sudah jelas kan betapa penting nya fitur debounce ini?
Cara Menggunakan Debounce Pada Jquery
Sekarang gimana caranya kita menerapkan fitur debounce pada jquery? gampang banget..
Pertama kita perlu panggil library nya terlebih dahulu.
<script src="https://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js"></script>
Setelah itu, kita bisa langsung menerapkan pada beberapa event DOM nya, biasanya lebih sering diterapkan pada event on keyup / on keypress / on keydown.
Untuk contoh penggunaan nya adalah seperti berikut ini:
....
$('body').on('keyup', '#search_data', $.debounce(500, function() {
// process here
}))
....
Pada contoh diatas, saya menerapkan waktu debounce nya selama 500ms, kalau kalian ingin menunda nya selama 1 detik, berarti tinggal diganti 1000 aja.
Mudah kan?
Support Us
Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid
