Throttle dan Debounce

Tabel Konten
  1. Throttle 
  2. Debounce 
  • Beberapa Event JavaScript yang Masuk dalam Kategori Sensitif 
  • Contoh Penerapan dalam Kasus Nyata 
  • 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.

    33 Komentar

    • kontol ajing pepek

      lebih enak lihat sourcenya :yaya: gak ada pake foo, berarti bedanya itu throttle mengeksekusi data selama mouse bergerak, kalo debounce setelah mouse selesai bergerak.

      • Taufik Nurrohman

        ... berarti bedanya itu throttle mengeksekusi data selama mouse bergerak ...

        Selama mouse bergerak dan dalam rentang waktu yang lebih jarang.

        • kontol ajing pepek

          sebenarnya sudah tepat secara pengertiannya. tapi dengan adanya rentang waktu(interval) yang diberikan sehingga jelas dan bagaimana prosesnya.

    • Kang Ismet

      walau sedikit ga nyambung, apa perbedaan dari .hover dan onmouseover?

      • Taufik Nurrohman

        .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');
        });
      • Beben Koben

        tah penjelasan ti murid urang, ngarti teu?

        • Anonim

          rieut ang... haha

        • Kang Ismet

          skitu jelasna.. piraku oon keneh teu ngarti mah atuh :P

    • Suwardi

      Ini post benar-benar memusingkan dan membuat sedikit binggung jika tidak teliti membacanya..

      • Admin

        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 :)

        • Kang Ismet

          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 :)

          • Admin

            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.

        • Taufik Nurrohman

          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).

          • Admin

            ini baru jawaban yang teliti mas taufik, dengan begini saya jadi mengerti. setidaknya saya membaca postingan dan harus memahami inti dari artikel. :)

    • Fajrin

      ane cukup paham. kira2 paling cocok meletakkan pada bagian mana ya Mas ?? bingung ane :D

    • Wildan MR

      Mas keren banget :D

    • Admin

      apa bedanya onkeyup sama kode onkeydown dan kode onkeypress

      inikan fungsi mengetik, tapi kok tulisannya berbeda mas? :)

    • Sopala Multapa

      No comment mas .. tapi ini sangat berdasar dalam pengembangan diri !! maksud'y untuk penelitian yang nantinya akan diaplikasikan pada hal yang lebih luas .. thx

    • Unknown

      ini saya terapkan dimana ya ?, saya bingung nih, masih pemula udah dikasih materi yang ginian , aduhh pusing gw, hehe -> http://free-btemplate.blogspot.com/

    • Edudetik

      mas ada JS yg kebannet ini JSnya : http://reader-download.googlecode.com/svn/trunk/rp-spy-whatever-v1.js
      ada yg lain mas?

      • dhan oke

        iya, kacau semua widget saya

    • Kajool

      mas ada tutorial cara nyimpan credit link template dengan javascript ga?

    • Anonim

      Pelajaran baru juga ini untuk kode-kode atau script diatas agak jarang dapat seperti tutorial diatas.

    • Unknown

      ini web keren banget. -_-

    • Yusril Ibnu Maulana

      gara gara akun google code DTE di ban, web saya juga jadi ikut kacau -_-, minta auentikasi..
      mudah mudahan cepet solvednya ya...,

    • Saeful Rahman

      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 ?

    • Kemal dan Riga

      Nice sekali mas

    • Rdk

      ini kayaknya not for newbieee :p

    • Unknown

      Bro boleh tanya nggak ?
      bikin info label berwarna-warni kayak http://mdf-blog.blogspot.com/ gimana ?

    • Unknown

      :-bd Mantep Sobat..
      Dengan membaca saja gak mungkin bisa nih sobat...
      Harus bereksperimen...

    • Anonim

      walah ane baru tau ada istilah throttle sama debounce ini hehe

    • Unknown

      Tingkat lanjut -_-
      Pahami dikit-dikit dulu

    Komentar telah ditutup.