Throttle dan Debounce
Dalam JavaScript, istilah throttle dan debounce biasa digunakan untuk menyatakan mengurangi atau menunda eksekusi fungsi yang bekerja berkali-kali, misalnya ketika pengguna sedang mengubah ukuran layar atau menggerak-gerakkan pointer mouse. Tujuan utama dari metode ini adalah untuk memastikan agar eksekusi fungsi bisa 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 usaha untuk membuat jumlah eksekusi fungsi menjadi lebih jarang dari event yang terjadi. Di sini, fungsi bernama foo()
akan dieksekusi 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 eksekusi berikutnya (milidetik)
previousCall = new Date().getTime(); // Set waktu kadaluarsa awal
document.onmousemove = function() {
var time = new Date().getTime();
// Bandingkan antara waktu terakhir kali eksekusi 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 usaha untuk membuat fungsi tereksekusi hanya jika pengguna telah berhenti melakukan suatu event yang berulang, atau hanya dieksekusi sekali saja saat pertama kali event terjadi. Misalnya ketika pengguna berhenti menggerakkan pointer mouse saja atau ketika pengguna mulai menggerakkan pointer mouse saja. Yang paling umum diterapkan adalah kasus yang pertama.
Fungsi di bawah ini terdiri dari penunda berupa setTimeout
di dalam jenis event sensitif yang bisa mengeksekusi fungsi berkali-kali setiap kali pengguna menggerakkan pointer mouse di atas dokumen. Namun karena pada saat yang bersamaan fungsi clearTimeout
menggagalkan setTimeout
untuk mencapai akhir waktu tunda, maka fungsi foo()
tidak akan pernah bisa tereksekusi sebelum pengguna benar-benar menghentikan gerakkan pointer mouse mereka:
var timer = null;
document.onmousemove = function() {
if (timer) clearTimeout(timer); // Hentikan `setTimeout` sesegera mungkin agar `foo()` tidak tereksekusi
timer = setTimeout(function() {
foo(); // Jalankan fungsi `foo()` jika timer tidak lagi dihentikan oleh `clearTimeout`
timer = null;
}, 300);
};
function foo() {
console.log('test!');
}
Waktu penunda selama 300
milidetik dibuat hanya sebagai toleransi saja untuk memastikan agar waktu eksekusi berjalan lebih lambat dari pergerakkan pointer mouse pengguna:
Beberapa Event JavaScript yang Masuk dalam Kategori Sensitif
Saya menyebutnya sebagai event yang sensitif karena event ini bisa mengeksekusi fungsi berkali-kali dengan cepat jika 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 adalah sebuah gambaran penerapan debounce untuk mencegah AJAX memanggil data berkali-kali pada saat 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 kasus yang nyata. Tapi pada intinya, metode ini berfungsi untuk menunda fungsi agar fungsi tersebut tereksekusi dalam interval waktu tertentu saja pada saat pengguna menjalankan event.
Beberapa manfaat lain dari metode ini:
- Membuat aplikasi yang dapat 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.
Labels: JavaScript, Lanjutan
33 Comments:
lebih enak lihat sourcenya :yaya: gak ada pake foo, berarti bedanya itu throttle mengeksekusi data selama mouse bergerak, kalo debounce setelah mouse selesai bergerak.
walau sedikit ga nyambung, apa perbedaan dari .hover dan onmouseover?
Ini post benar-benar memusingkan dan membuat sedikit binggung jika tidak teliti membacanya..
.hover() itu cuma API yang dibuat oleh manusia sesuai dengan standar produk yang mereka buat (dalam hal ini JQuery). Mereka tidak ada kaitannya dengan spesifikasi web, tapi ujung-ujungnya akan tetap mengarahkan API ke fungsi standar yang sebenarnya yaitu onmouseenter dan onmouseleave. Contoh sederhana, di sini Saya bisa membuat API JQuery baru bernama .aksi() dan .aksiHover():
$.fn.aksi = function(eventName, fn) {
return this.on(eventName, fn);
};
$.fn.aksiHover = function(fn1, fn2) {
return this.aksi("mouseenter", fn1).aksi("mouseleave", fn2);
};
yang kemudian bisa Saya gunakan seperti ini dalam aplikasi:
$('div').aksiHover(function() {
$(this).css('color', 'red');
}, function() {
$(this).css('color', 'green');
});
... berarti bedanya itu throttle mengeksekusi data selama mouse bergerak ...
Selama mouse bergerak dan dalam rentang waktu yang lebih jarang.
sebenarnya sudah tepat secara pengertiannya. tapi dengan adanya rentang waktu(interval) yang diberikan sehingga jelas dan bagaimana prosesnya.
ane cukup paham. kira2 paling cocok meletakkan pada bagian mana ya Mas ?? bingung ane :D
Mas keren banget :D
apa bedanya onkeyup sama kode onkeydown dan kode onkeypress
inikan fungsi mengetik, tapi kok tulisannya berbeda mas? :)
kalau postingan mas taufik sih memang cukup rumit, dan setidaknya yang membaca harus sedikit mengerti kode html hehehe.. tapi terus terang blog ini memang menjadikan tempat inspirasi saya untuk belajar, walau komentar saya jarang sekali di balas oleh mas taufik. mungkin saya dianggap terlalu newbie sih oleh mas taufik hehehe :)
sedikit meluruskan aja jeng.. :) setelah memahami 'Cara Berkomentar'.. tidak ada anggapan newbie, expert dll, hanya saja mas taufik tidak akan mejawab pertanyaan basa-basi, o-o-t, atau pertanyaan yang ga jelas, seperti kenapa di blog saya ga bisa? kenapa begini? hehehheh itu menurut saya
intinya pertanyaan harus sesuai tema, hal yang ditanyakan jelas (sudah dilakukan step by step, dan dimana letak permasalahannya). apa lagi ya... gitu aja kaleee :)
Biasanya Saya jarang menjawab pertanyaan yang bisa dengan mudah dicari melalui Google, Saya tidak menjawabnya dengan harapan mereka bisa mencoba untuk mencarinya sendiri. Maaf kalau ada yang tersinggung soal ini. Saya hanyalah seorang manusia biasa.
Mengenai perbedaan onkeyup, onkedown dan onkeypress itu cuma ada di aksi jari kita terhadap tombol di papan kunci:
keydown ⇒ Jari menekan tombol
keyup ⇒ Jari melepaskan tekanannya dari tombol
keypress ⇒ Jari menekan tombol, kemudian melepaskan tekanannya (event ini akan bekerja setelah event keydown dan keyup terjadi).
Mirip juga dengan aksi klik:
mousedown ⇒ Jari mengeklik/menekan tombol mouse
mouseup ⇒ Jari melepaskan tekanannya dari tombol mouse
click ⇒ Jari mengeklik/menekan tombol mouse, kemudian melepaskan tekanannya (event ini akan bekerja setelah event mousedown dan mouseup terjadi).
ini baru jawaban yang teliti mas taufik, dengan begini saya jadi mengerti. setidaknya saya membaca postingan dan harus memahami inti dari artikel. :)
hehehe memang mas taufik orangnya gak suka basa-basi sih.. keren lo hehehe... buat mas taufik jangan tersinggung ya atas komentar saya, saya cuman sekedar ingin meluangkan isi hati saya saja.
No comment mas .. tapi ini sangat berdasar dalam pengembangan diri !! maksud'y untuk penelitian yang nantinya akan diaplikasikan pada hal yang lebih luas .. thx
tah penjelasan ti murid urang, ngarti teu?
rieut ang... haha
skitu jelasna.. piraku oon keneh teu ngarti mah atuh :P
ini saya terapkan dimana ya ?, saya bingung nih, masih pemula udah dikasih materi yang ginian , aduhh pusing gw, hehe -> http://free-btemplate.blogspot.com/
mas ada JS yg kebannet ini JSnya : http://reader-download.googlecode.com/svn/trunk/rp-spy-whatever-v1.js
ada yg lain mas?
iya, kacau semua widget saya
mas ada tutorial cara nyimpan credit link template dengan javascript ga?
Pelajaran baru juga ini untuk kode-kode atau script diatas agak jarang dapat seperti tutorial diatas.
ini web keren banget. -_-
gara gara akun google code DTE di ban, web saya juga jadi ikut kacau -_-, minta auentikasi..
mudah mudahan cepet solvednya ya...,
mas maaf nih keluar dari permasalahan ini.
Biasanya saat klik tombol reply akan muncul link seperti ini http://contoh.com/2013/11/contoh.html#r_c2412331212096982664. Namun, beda hal nya dengan komentar punya saya, yg muncul justru link biasa seperti ini http://contoh.com/2013/11/contoh.html, hal ini membuat ada beberapa js yang tidak jalan pada komentar.
Saya sudah mencoba mengulang pemasangan komentar, tapi hasilnya nihil. Kira - kira permasalahannya dimana ? Apa mungkin ada HTML yang hilang ?
Nice sekali mas
ini kayaknya not for newbieee :p
Bro boleh tanya nggak ?
bikin info label berwarna-warni kayak http://mdf-blog.blogspot.com/ gimana ?
⇒ /2013/01/bagaimana-cara-bertanya-yang-baik-di.html
:-bd Mantep Sobat..
Dengan membaca saja gak mungkin bisa nih sobat...
Harus bereksperimen...
walah ane baru tau ada istilah throttle sama debounce ini hehe
Tingkat lanjut -_-
Pahami dikit-dikit dulu
Post a Comment
<< Home