Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Throttle dan Debounce

Throttle and Debounce Diagram

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.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 33 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!