Cara Debounce Input Search Javascript agar Request Tidak Menumpuk

Ditulis oleh JavaScript

Cara debounce input search JavaScript adalah membungkus fungsi pencarian dengan timer, lalu membatalkan timer lama setiap user mengetik huruf baru. Fetch atau filter hanya jalan setelah user berhenti mengetik selama 300ms. Langkah yang sering terlewat adalah memanggil clearTimeout sebelum membuat setTimeout baru, tanpa ini request tetap menumpuk.

Cara Kerja Debounce untuk Input Search

Debounce menahan eksekusi fungsi sampai tidak ada event baru dalam durasi tertentu. Setiap keystroke me-reset hitungan mundur dari awal.

  • User mengetik “sepatu”: 6 event input masuk berurutan.
  • Tanpa debounce, browser mengirim 6 request API sekaligus.
  • Dengan debounce 300ms, 5 request pertama dibatalkan, hanya 1 request terakhir yang jalan.

Debounce cocok untuk search karena hasil akhir lebih penting daripada proses mengetik. Throttle berbeda, throttle membatasi eksekusi misalnya sekali per 200ms, cocok untuk scroll atau resize, bukan untuk menunggu user selesai mengetik.

Kebutuhan dasarnya hanya input teks, event input, setTimeout, dan clearTimeout.

BACA JUGA:

Langkah Membuat Debounce Search Vanilla Javascript

  1. Ambil elemen input dengan getElementById. Pastikan script jalan setelah DOM dimuat.
  2. Buat fungsi debounce dengan delay 250 sampai 500ms.
  3. Pasang fungsi tersebut pada event input, lalu panggil fetch hanya setelah jeda selesai.
  4. Gunakan kode berikut:
const searchInput = document.getElementById("search");

function debounce(func, delay) {
  let timerId;
  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => func.apply(this, args), delay);
  };
}

async function fetchSearch(query) {
  if (!query) return;
  const res = await fetch("/api/search?q=" + encodeURIComponent(query));
  if (!res.ok) return;
  const data = await res.json();
  console.log(data);
}

const debouncedSearch = debounce(fetchSearch, 300);

searchInput.addEventListener("input", (e) => {
  debouncedSearch(e.target.value.trim());
});

Penjelasan Bagian Kode dan Tabel Parameter

Timer menyimpan ID timeout aktif. Delay menentukan lama jeda tunggu. Fungsi pembersih membatalkan jadwal lama sebelum jadwal baru dibuat.

Bagian Kode Fungsi Catatan
timerId Menyimpan jadwal timeout Deklarasikan di closure
delay Jeda tunggu dalam ms Gunakan 300 untuk search
clearTimeout Membatalkan jadwal lama Wajib sebelum setTimeout

Timer yang tidak dibersihkan menumpuk di memori dan memicu fetch basi. Hasil pencarian lama bisa menimpa hasil terbaru karena response datang tidak berurutan.

FAQ

Berapa delay ideal untuk debounce search?

Gunakan 300ms untuk kebanyakan search lokal dan API, naikkan ke 500ms bila API lambat atau berbayar per request.

Kapan memakai throttle dibanding debounce?

Pakai throttle untuk event kontinu seperti scroll dan mousemove, pakai debounce untuk menunggu input selesai seperti search.

Artikel Terkait