Debounce JavaScript: Cara Membuat dan Contoh Kodenya
Debounce JavaScript adalah teknik yang menunda eksekusi sebuah fungsi sampai suatu aktivitas berhenti selama waktu tertentu. Teknik ini sangat berguna pada fitur pencarian, karena pengguna mengharapkan hasil yang cepat saat mengetik. Namun, jika setiap karakter langsung memicu permintaan ke server, aplikasi akan menjalankan banyak proses yang sebenarnya tidak perlu.
Pada artikel ini, Anda akan belajar konsep debounce, alasan penggunaannya, cara membuatnya tanpa library, hingga hal-hal yang perlu diwaspadai saat menerapkannya.
Apa Itu Debounce dalam JavaScript?
Debounce adalah teknik pemrograman yang menunda eksekusi fungsi sampai aktivitas tertentu berhenti selama interval yang ditentukan.
Misalnya, pengguna mengetik kata javascript pada kolom pencarian. Tanpa debounce, fungsi pencarian bisa dipanggil sebanyak sepuluh kali, yaitu satu kali untuk setiap huruf. Dengan debounce, program menunggu sampai pengguna berhenti mengetik selama beberapa milidetik, lalu menjalankan fungsi pencarian satu kali saja.
Debounce berbeda dari jeda tetap. Setiap aktivitas baru akan mengatur ulang waktu tunggu, sehingga fungsi hanya berjalan ketika tidak ada aktivitas tambahan selama interval tersebut.
Ilustrasi cara kerja debounce JavaScript pada kolom pencarian
Mengapa Debounce Dibutuhkan pada Website?
Ada tiga alasan utama untuk menerapkan debounce pada aplikasi web.
1. Mengurangi Pemanggilan Fungsi yang Tidak Perlu
Pengguna sering mengetik, menghapus, lalu memperbaiki kata kunci dalam waktu singkat. Menjalankan pencarian pada setiap perubahan hanya menghasilkan pekerjaan yang sia-sia. Debounce menggabungkan rangkaian perubahan itu menjadi satu eksekusi.
2. Mengendalikan Permintaan ke Server
Jika pencarian terhubung dengan API, setiap permintaan memakai sumber daya jaringan dan server. Dengan debounce, jumlah permintaan selama pengguna masih menyusun kata kunci bisa berkurang drastis.
Perlu diingat bahwa debounce tidak otomatis membuat hasil pencarian lebih cepat. Kecepatan tetap dipengaruhi koneksi internet, waktu respons API, ukuran data, dan pemrosesan di server.
3. Membuat Interaksi Lebih Nyaman
Kecepatan mengetik setiap orang berbeda. Ada yang mengetik cepat, ada pula yang sering berhenti untuk berpikir. Dengan jeda yang sesuai, pencarian berjalan setelah input cukup stabil, sehingga pengalaman pengguna terasa lebih teratur.
Cara Membuat Debounce Sederhana dengan JavaScript
Untuk memahami konsepnya, mari buat contoh sederhana tanpa library tambahan. Buat file bernama index.html, lalu masukkan kode berikut.
html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Debounce JavaScript</title>
</head>
<body>
<h2>Pencarian Produk</h2>
<input
type="text"
id="search"
placeholder="Ketik nama produk..."
>
<p id="result">Masukkan kata kunci pencarian.</p>
<script>
const searchInput = document.getElementById("search");
const result = document.getElementById("result");
let timer;
searchInput.addEventListener("input", function () {
clearTimeout(timer);
const keyword = this.value.trim();
timer = setTimeout(function () {
if (keyword === "") {
result.textContent = "Masukkan kata kunci pencarian.";
return;
}
result.textContent = "Mencari produk: " + keyword;
}, 500);
});
</script>
</body>
</html>Simpan file tersebut, lalu buka di browser untuk mencoba fitur pencariannya.
Memahami Bagian Penting Kode
1. Mengambil elemen input
javascript
const searchInput = document.getElementById("search");Baris ini mengambil elemen input berdasarkan ID search, yaitu tempat pengguna memasukkan kata kunci.
2. Menghapus timer sebelumnya
javascript
clearTimeout(timer);Setiap kali pengguna mengetik karakter baru, timer sebelumnya dibatalkan. Dengan begitu, fungsi pencarian tidak dijalankan berdasarkan aktivitas lama yang sudah tidak relevan.
3. Mengatur waktu tunggu
javascript
timer = setTimeout(function () {
// Proses pencarian
}, 500);Fungsi di dalam setTimeout() baru berjalan setelah 500 milidetik berlalu tanpa dibatalkan oleh input berikutnya. Anda bisa mempelajari fungsi ini lebih lanjut di dokumentasi setTimeout MDN.
4. Memproses kata kunci
javascript
result.textContent = "Mencari produk: " + keyword;Contoh ini hanya menampilkan kata kunci yang dimasukkan. Belum ada pencarian data produk sungguhan, karena fokusnya adalah mekanisme debounce.
Membuat Fungsi Debounce yang Bisa Digunakan Kembali
Jika proyek Anda memiliki beberapa fitur yang membutuhkan debounce, buatlah fungsi terpisah agar kode lebih mudah dipakai ulang.
javascript
function debounce(callback, delay = 500) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
callback.apply(this, args);
}, delay);
};
}Fungsi ini menerima dua parameter: callback yang ingin dijalankan dan durasi penundaan. Nilai bawaan durasinya adalah 500 milidetik. Berikut contoh penggunaannya pada kolom pencarian.
javascript
const searchInput = document.getElementById("search");
function searchProduct(keyword) {
console.log("Kata kunci:", keyword);
}
const debouncedSearch = debounce(function (event) {
searchProduct(event.target.value.trim());
}, 500);
searchInput.addEventListener("input", debouncedSearch);Pada contoh ini, debouncedSearch menunggu hingga input berhenti selama 500 milidetik sebelum memanggil searchProduct().
Keuntungannya, logika debounce tidak perlu ditulis ulang setiap kali ada fitur baru. Fungsi yang sama bisa dipakai untuk beberapa kolom input, masing-masing dengan timernya sendiri.
Kapan Sebaiknya Menggunakan Debounce?
Debounce tidak perlu diterapkan pada semua interaksi. Beberapa penggunaan yang sesuai:
- Live search: menunggu pengguna selesai mengetik sebelum mencari.
- Validasi formulir: menunda pemeriksaan sampai pengguna berhenti mengubah nilai input.
- Pemeriksaan username: mengurangi permintaan cek ketersediaan username ke server.
- Filter data: menunggu input stabil sebelum memproses penyaringan yang cukup berat.
- Penyimpanan otomatis: menunda penyimpanan setelah pengguna berhenti mengubah isi, dengan tetap mempertimbangkan risiko kehilangan data.
Sebaliknya, debounce kurang cocok untuk aktivitas yang harus diproses segera, seperti perubahan pada kontrol penting atau interaksi yang butuh respons langsung.
Debounce vs Throttle
Untuk aktivitas yang perlu berjalan secara berkala selama pengguna terus berinteraksi, misalnya saat scroll atau resize jendela, gunakan throttle. Throttle membatasi seberapa sering fungsi berjalan dalam periode tertentu, sedangkan debounce menunggu sampai aktivitas mereda.
Hal yang Perlu Diperhatikan saat Menggunakan Debounce
Meskipun sederhana, ada beberapa hal yang perlu diperhatikan agar implementasi tidak menimbulkan masalah baru.
- Pilih durasi sesuai kebutuhan. Waktu tunggu yang terlalu singkat tidak banyak mengurangi pemanggilan fungsi, sedangkan yang terlalu lama membuat pencarian terasa lambat. Rentang 300-500 milidetik umumnya cukup masuk akal sebagai titik awal.
- Perhatikan urutan respons API. Permintaan lama bisa tiba setelah hasil pencarian terbaru. Pertimbangkan membatalkan permintaan sebelumnya dengan AbortController atau mekanisme lain yang sesuai.
- Jangan jadikan debounce pengganti optimasi backend. Pencarian yang lambat karena query database tidak efisien tetap harus diperbaiki di sisi server.
- Uji berbagai kondisi input, termasuk kata kunci kosong, pengetikan cepat, penghapusan teks, dan perubahan kata kunci sebelum waktu tunggu berakhir.
Pertanyaan yang Sering Diajukan (FAQ)
Apa perbedaan debounce dan throttle?
Debounce menjalankan fungsi setelah aktivitas berhenti selama waktu tertentu. Throttle menjalankan fungsi secara berkala selama aktivitas berlangsung.
Berapa durasi debounce yang ideal?
Tidak ada angka pasti. Untuk fitur pencarian, 300-500 milidetik sering dipakai, lalu disesuaikan dengan hasil pengujian.
Apakah debounce membuat pencarian lebih cepat?
Tidak secara langsung. Debounce mengurangi jumlah permintaan, tetapi kecepatan hasil tetap bergantung pada jaringan dan server.
Kesimpulan
Debounce JavaScript adalah teknik sederhana untuk mengatur eksekusi fungsi ketika suatu aktivitas terjadi berulang kali dalam waktu singkat. Teknik ini berguna untuk fitur pencarian, validasi input, filter data, dan interaksi lain yang tidak perlu diproses pada setiap perubahan karakter.
Dengan setTimeout() dan clearTimeout(), Anda bisa membuat debounce dasar tanpa library. Untuk proyek yang lebih besar, fungsi debounce yang reusable membantu menjaga kode tetap rapi.
