Debounce in Vanilla JavaScript – ohne Bibliothek

Ein Klassiker: Du hast ein Suchfeld, das bei jedem Tastendruck eine Anfrage schickt. Tippt jemand „Berlin", sind das schon sechs Anfragen. Mit Debounce wartest du, bis kurz nichts mehr passiert, und feuerst erst dann. Dafür brauchst du keine Bibliothek – ein Timer reicht.

Die Funktion

debounce gibt eine neue Funktion zurück, die einen laufenden Timer bei jedem Aufruf zurücksetzt. Erst wenn wait Millisekunden lang Ruhe herrscht, läuft die eigentliche Funktion.

function debounce(fn, wait = 300) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}

Anwenden

const input = document.querySelector('#suche');

const suche = debounce((event) => {
  const q = event.target.value.trim();
  if (q.length < 2) return;
  console.log('Suche nach:', q);
  // hier z. B. fetch(`/api/suche?q=${encodeURIComponent(q)}`)
}, 400);

input.addEventListener('input', suche);

Tippt jemand jetzt zügig „Berlin", passiert genau eine Suche – 400 Millisekunden nach dem letzten Tastendruck. Das entlastet deinen Server und macht die Oberfläche ruhiger.

Kleiner Hinweis zur Abgrenzung: Debounce wartet auf eine Pause. Willst du stattdessen höchstens alle X Millisekunden feuern (etwa beim Scrollen), brauchst du *Throttle* – ein verwandtes, aber anderes Muster.

Solche kleinen Performance-Kniffe stecken in jeder Website, die ich baue. Wenn du eine schnelle, moderne Seite brauchst, schau auf bymw.de vorbei.

Quellen

• setTimeout() – MDN Web Docs
• clearTimeout() – MDN Web Docs