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.
Promo Tutorial Premium Video Tutorial Mahir Web Development (Bangun 5 Project Website) + Video Tutorial Membuat Aplikasi Mobile (Bangun 4 Aplikasi Android + Upload Playstore) + Bonus Tutorial Membuat Theme Wordpress Premium - 3 Tutorial (5DVD) Hanya Rp 150.000 - Terbatas hanya sampai 31 Januari 2020!
Dibuat oleh praktisi yang memiliki pengalaman lebih dari 12 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)
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
