Tangani Request AJAX Berlebihan Pada JQuery KeyUp Event dengan Menambahkan Delay Time

Halo, sudah lama tidak membahas tutorial belajar JQuery. Kali ini kita akan membahas JQuery event, yakni on keyup. Ini merupakan tutorial yang berawal dari permasalahan yang ditemui oleh penulis ketika bekerja sehari-hari menggunakan JQuery, dan memanfaatkan salah satu fiturnya AJAX yang dipadu dengan OnKeyUp.

Jadi kasusnya adalah seperti ini, ketika seorang user mengetikkan keyword misalnya, di form input, untuk melakukan pencarian database, nah biasanya di background proses terjadi pemanggilan request ajax yang tentunya memanggil URL PHP yang mana URL PHP ini tentunya PHP URL ini berisi script yang konek ke database, nah yang menyebalkan adalah setiap kali keyup dengan kata lain tuts keyboard di tekan lalu di angkat maka AJAX Requestnya juga dipanggil.

Tentunya hal tersebut akan memakan resource server. Jadinya sebelum user mengetikan keyword AJAX request sudah dipanggil.

Nah lalu bagaimana solusinya? Jadi setelah sepersekian detik sesuai dengan yang di set misalnya 800 ms, user selesai mengetikan keyword barulah dipanggil AJAX Requestnya, sehingga meminimalisir pemanggilan AJAX Request.

Kita menggunakan delay function untuk memberikan jeda waktu sesuai dengan yang kita set. Misalnya di set sampai 800ms misalnya baru di panggil AJAX Requestnya.

Kodenya kurang lebih seperti ini, untuk melihat hasilnya Anda bisa klik tombol Result

See the Pen Keyup dengan Delay by Ilmuwebsite (@ilmuwebsite) on CodePen.

Selamat bereksperimen