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!');
}

Lihat Demo

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:

Lihat Demo

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:

1. Membuat aplikasi yang dapat menyimpan data secara otomatis setiap kali pengguna berhenti mengetik.
2. 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.
3. Mengubah dan mengatur ulang posisi elemen dalam jumlah yang banyak dengan perhitungan yang rumit setiap kali pengguna mengubah ukuran layar pada interval tertentu.