Dalam JavaScript, istilah throttle dan debounce biasa dipakai untuk menyatakan mengurangi atau menunda sanksi fungsi yang bekerja berkali-kali, contohnya ketika pengguna sedang mengubah ukuran layar atau menggerak-gerakkan pointer mouse. Tujuan utama dari metode ini yakni untuk memastikan biar sanksi fungsi sanggup bekerja seefektif dan seefisien mungkin sekaligus juga sejarang mungkin, sehingga peramban tidak akan terlalu terbebani di dalam mengeksekusi fungsi yang terjadi berkali-kali, yang belum tentu juga fungsi tersebut memang perlu untuk dijalankan sesering itu.
Throttle
Metode ini berdasar pada sebuah perjuangan untuk menciptakan jumlah sanksi fungsi menjadi lebih jarang dari event yang terjadi. Di sini, fungsi berjulukan foo() akan dihukum setiap 1 detik sekali selama kita menggerak-gerakkan pointer mouse di atas dokumen dan bukannya setiap kali pointer mouse berkerak:
var delay = 1000, // Interval pembatas/penundaan sanksi berikutnya (milidetik) previousCall = new Date().getTime(); // Set waktu kadaluarsa awal document.onmousemove = function() { var time = new Date().getTime(); // Bandingkan antara waktu terakhir kali sanksi dengan waktu setiap kali event bekerja. // Jika selisihnya sudah mencapai/melebihi `delay`, jalankan fungsi `foo()` if ((time - previousCall) >= delay) {foo(); previousCall = time; // Set ulang waktu kadaluarsa } }; function foo() { console.log('test!'); }Debounce
Metode ini berdasar pada sebuah perjuangan untuk menciptakan fungsi tereksekusi hanya jikalau pengguna telah berhenti melaksanakan suatu event yang berulang, atau hanya dihukum sekali saja dikala pertama kali event terjadi. Misalnya ketika pengguna berhenti menggerakkan pointer mouse saja atau ketika pengguna mulai menggerakkan pointer mouse saja. Yang paling umum diterapkan yakni masalah yang pertama.
Fungsi di bawah ini terdiri dari penunda berupa setTimeout di dalam jenis event sensitif yang sanggup mengeksekusi fungsi berkali-kali setiap kali pengguna menggerakkan pointer mouse di atas dokumen. Namun alasannya yakni pada dikala yang bersamaan fungsi clearTimeout menggagalkan setTimeout untuk mencapai final waktu tunda, maka fungsi foo() tidak akan pernah sanggup tereksekusi sebelum pengguna benar-benar menghentikan gerakkan pointer mouse mereka:
var timer = null; document.onmousemove = function() { if (timer) clearTimeout(timer); // Hentikan `setTimeout` sesegera mungkin biar `foo()` tidak tereksekusi timer = setTimeout(function() {foo(); // Jalankan fungsi `foo()` jikalau timer tidak lagi tidak boleh oleh `clearTimeout` timer = null; }, 300); }; function foo() { console.log('test!'); }Waktu penunda selama 300 milidetik dibentuk hanya sebagai toleransi saja untuk memastikan biar waktu sanksi berjalan lebih lambat dari pergerakkan pointer mouse pengguna:
Beberapa Event JavaScript yang Masuk dalam Kategori Sensitif
Saya menyebutnya sebagai event yang sensitif alasannya yakni event ini sanggup mengeksekusi fungsi berkali-kali dengan cepat jikalau sedang dikerjakan oleh pengguna. Beberapa di antaranya adalah:
onmousemove(menggerakkan)onscroll(menggulung)onresize(mengubah ukuran)onkeyup(mengetik)onkeydown(mengetik)onkeypress(mengetik)
Contoh Penerapan dalam Kasus Nyata
Berikut ini yakni sebuah citra penerapan debounce untuk mencegah AJAX memanggil data berkali-kali pada dikala pengguna mengetik kata kunci pencarian. Di sini, data hanya akan terpanggil hanya jika pengguna telah berhenti mengetik:
<input type="text" id="search-field"> <div id="search-result"></div> <script src="js/jquery.js"></script> <script> var timer = null; $('#search-field').on("keydown", function() { var keyword = this.value; if (timer) clearTimeout(timer); timer = setTimeout(function() { // Panggil data! $.get('http://sumber_data.com/search?q=' + keyword, function(data) { $('#search-result').html($(data)); }); timer = null; }, 300); }); </script>Saya tidak begitu sering melihat penerapan metode throttle dalam masalah yang nyata. Tapi pada intinya, metode ini berfungsi untuk menunda fungsi biar fungsi tersebut tereksekusi dalam interval waktu tertentu saja pada dikala pengguna menjalankan event.
Beberapa manfaat lain dari metode ini:
- Membuat aplikasi yang sanggup menyimpan data secara otomatis setiap kali pengguna berhenti mengetik.
- Fitur penelusuran dengan AJAX yang memungkinkan pengguna untuk memanggil data tanpa harus memaksa pengguna untuk menekan tombol Submit. Cukup dengan mengetik kata kunci dan berhenti, maka hasil penelusuran akan segera dimuat.
- Mengubah dan mengatur ulang posisi elemen dalam jumlah yang banyak dengan perhitungan yang rumit setiap kali pengguna mengubah ukuran layar pada interval tertentu.