Debouncing dan Throttling di JavaScript: Cara Membuat Website Lebih Responsif

Ketika membangun website interaktif, tidak semua aksi pengguna perlu langsung diproses oleh program. Misalnya ketika pengguna mengetik pada kolom pencarian, mengubah ukuran browser, atau melakukan scroll.

Jika setiap perubahan langsung menjalankan fungsi JavaScript, browser dapat menerima terlalu banyak proses dalam waktu singkat. Pada aplikasi sederhana mungkin tidak terasa, tetapi pada website dengan proses yang lebih kompleks kondisi tersebut dapat memengaruhi responsivitas aplikasi.

JavaScript menyediakan beberapa pendekatan untuk mengatasi masalah tersebut. Dua teknik yang cukup populer adalah debouncing dan throttling.

Keduanya sama-sama digunakan untuk mengatur seberapa sering sebuah fungsi dijalankan, tetapi cara kerjanya berbeda.

Apa Itu Debouncing dan Throttling?

Debouncing dan throttling merupakan teknik untuk mengontrol pemanggilan fungsi ketika sebuah event terjadi berkali-kali dalam waktu singkat.

Contohnya adalah event:

• input
• scroll
• resize
• mousemove
• keyup
• keydown

Tanpa pengaturan yang tepat, event tersebut dapat menjalankan fungsi JavaScript berkali-kali.

Sebagai contoh, pengguna mengetik:

javascript

Setiap karakter dapat menghasilkan event input.

Artinya, satu aktivitas mengetik dapat menghasilkan banyak pemanggilan fungsi.

Jika setiap event melakukan request ke server, aplikasi dapat menghasilkan request yang tidak diperlukan.

Di sinilah debouncing dan throttling dapat digunakan.

Apa Itu Debouncing?

Debouncing adalah teknik yang membuat sebuah fungsi hanya dijalankan setelah event berhenti terjadi selama waktu tertentu.

Misalnya kita menetapkan waktu tunggu selama 500 milidetik.

Ketika pengguna mengetik, timer akan terus di-reset.

Selama pengguna masih mengetik, fungsi belum dijalankan.

Fungsi baru dijalankan ketika pengguna berhenti mengetik selama 500 milidetik.

Secara sederhana:

User mengetik
↓
Event terjadi
↓
Timer dimulai
↓
User mengetik lagi
↓
Timer di-reset
↓
User mengetik lagi
↓
Timer di-reset
↓
User berhenti mengetik
↓
500 ms
↓
Fungsi dijalankan

Teknik ini sangat cocok untuk fitur pencarian.

Contoh Debouncing dengan JavaScript

Berikut contoh sederhana:

function debounce(callback, delay) {
    let timer;

    return function (...args) {
        clearTimeout(timer);

        timer = setTimeout(() => {
            callback.apply(this, args);
        }, delay);
    };
}

Kemudian fungsi tersebut dapat digunakan pada input pencarian:

const searchInput = document.querySelector("#search");

const search = debounce((event) => {
    console.log("Mencari:", event.target.value);
}, 500);

searchInput.addEventListener("input", search);

Dengan kode tersebut, fungsi search tidak akan langsung dijalankan setiap kali pengguna menekan tombol keyboard.

Fungsi akan menunggu sampai pengguna berhenti mengetik selama 500 milidetik.

Kapan Debouncing Digunakan?

Debouncing cocok digunakan ketika kita hanya membutuhkan hasil terakhir dari serangkaian event.

Beberapa contohnya:

Pencarian Produk

Misalnya website memiliki fitur pencarian produk.

Daripada mengirim request setiap kali pengguna mengetik satu karakter, aplikasi dapat menunggu sampai pengguna selesai mengetik.

Validasi Form

Debouncing juga dapat digunakan pada validasi input tertentu.

Aplikasi tidak harus melakukan proses validasi berat setiap kali pengguna menekan tombol keyboard.

Resize Browser

Event resize dapat terjadi berkali-kali ketika pengguna mengubah ukuran browser.

Debouncing dapat membantu menjalankan proses tertentu setelah pengguna selesai melakukan resize.

Apa Itu Throttling?

Berbeda dengan debouncing, throttling membatasi seberapa sering sebuah fungsi boleh dijalankan dalam periode tertentu.

Misalnya kita menetapkan interval 200 milidetik.

Walaupun event terjadi ratusan kali, fungsi hanya akan dijalankan maksimal satu kali dalam interval tersebut.

Gambaran sederhananya:

Event → Fungsi dijalankan
Event → diabaikan
Event → diabaikan
Event → diabaikan
200 ms
Event → Fungsi dijalankan
Event → diabaikan
Event → diabaikan
200 ms
Event → Fungsi dijalankan

Jadi, throttling tidak menunggu event berhenti.

Throttling tetap menjalankan fungsi secara berkala selama event masih berlangsung.

Contoh Throttling dengan JavaScript

Contoh sederhana implementasi throttling:

function throttle(callback, delay) {
    let waiting = false;

    return function (...args) {
        if (waiting) return;

        callback.apply(this, args);
        waiting = true;

        setTimeout(() => {
            waiting = false;
        }, delay);
    };
}

Kemudian dapat digunakan pada event scroll:

const handleScroll = throttle(() => {
    console.log("User sedang melakukan scroll");
}, 200);

window.addEventListener("scroll", handleScroll);

Walaupun pengguna melakukan scroll dengan cepat, fungsi tidak akan dijalankan pada setiap event.

Debouncing vs Throttling

Walaupun keduanya memiliki tujuan yang sama, terdapat perbedaan penting.

Debouncing	Throttling
Menunggu event berhenti	Tetap berjalan selama event terjadi
Cocok untuk hasil terakhir	Cocok untuk proses berkala
Timer di-reset ketika event terjadi	Memiliki interval eksekusi
Cocok untuk search	Cocok untuk scroll
Mengurangi request setelah aktivitas selesai	Membatasi frekuensi eksekusi

Contoh sederhananya:

Debouncing:

“Saya tunggu kamu selesai dulu.”

Throttling:

“Saya tetap proses, tetapi tidak terlalu sering.”

Kapan Sebaiknya Menggunakan Debouncing?

Gunakan debouncing ketika proses hanya diperlukan setelah pengguna selesai melakukan suatu aktivitas.

Contohnya:

• Search autocomplete
• Pencarian produk
• Validasi input
• Resize window
• Filter data
• Request API berdasarkan input

Misalnya pada pencarian:

Laptop gaming

Lebih efisien jika aplikasi menunggu pengguna selesai mengetik daripada mengirim request untuk:

L
La
Lap
Lapt
Lapto
Laptop
...

Kapan Sebaiknya Menggunakan Throttling?

Throttling lebih cocok ketika aplikasi perlu merespons event yang berlangsung terus-menerus.

Contohnya:

• Scroll halaman
• Mouse movement
• Drag and drop
• Resize
• Tracking posisi pengguna
• Animasi tertentu

Misalnya pada halaman yang memiliki tombol “Back to Top”.

Aplikasi tidak perlu menjalankan pemeriksaan posisi halaman pada setiap event scroll.

Dengan throttling, pemeriksaan tersebut dapat dibatasi menjadi beberapa kali dalam periode tertentu.

Mengapa Teknik Ini Penting?

Masalah performa tidak selalu berasal dari komputer pengguna atau server.

Kode JavaScript yang terlalu sering menjalankan fungsi juga dapat menyebabkan aplikasi terasa berat.

Bayangkan sebuah fungsi melakukan proses:

fetch("/api/products");

Jika fungsi tersebut dipanggil setiap kali pengguna mengetik, satu aktivitas pencarian dapat menghasilkan banyak request.

Selain membebani browser, request yang terlalu banyak juga dapat meningkatkan beban server dan penggunaan bandwidth.

Dengan debouncing, request dapat dilakukan setelah pengguna selesai mengetik.

Sementara throttling dapat digunakan ketika aplikasi memang membutuhkan pembaruan secara berkala.

Kesalahan yang Sering Dilakukan Developer

Salah satu kesalahan umum adalah menggunakan debouncing dan throttling tanpa memahami kebutuhan event.

Tidak semua event harus menggunakan teknik tersebut.

Jika sebuah event hanya terjadi sekali, menggunakan debounce atau throttle justru tidak memberikan manfaat berarti.

Kesalahan lainnya adalah memilih delay yang terlalu besar.

Misalnya pencarian menggunakan delay 3 detik.

Pengguna dapat merasa website lambat karena harus menunggu terlalu lama sebelum hasil pencarian muncul.

Karena itu, nilai delay perlu disesuaikan dengan karakteristik fitur.

Tips Memilih Debouncing atau Throttling

Gunakan pertanyaan sederhana berikut:

Apakah saya hanya membutuhkan hasil setelah pengguna selesai melakukan aktivitas?

Jika iya, gunakan debouncing.

Apakah saya perlu menjalankan fungsi secara berkala selama event berlangsung?

Jika iya, gunakan throttling.

Contohnya:

Search input       → Debouncing
Autocomplete       → Debouncing
Form validation    → Debouncing
Scroll             → Throttling
Mouse movement     → Throttling
Drag & Drop        → Throttling

Kesimpulan

Debouncing dan throttling merupakan teknik sederhana tetapi berguna dalam pengembangan aplikasi JavaScript.

Debouncing digunakan ketika fungsi sebaiknya dijalankan setelah rangkaian event berhenti, sedangkan throttling digunakan ketika fungsi perlu dijalankan secara berkala dengan frekuensi yang dibatasi.

Keduanya dapat membantu mengurangi pekerjaan JavaScript yang tidak diperlukan, mengurangi request berlebihan, dan membuat interaksi website terasa lebih responsif.

Bagi developer yang sering membuat fitur pencarian, filter, scroll event, atau aplikasi web interaktif, memahami perbedaan kedua teknik ini dapat menjadi salah satu langkah penting dalam menulis JavaScript yang lebih efisien.