Throttle in Vanilla JavaScript – höchstens alle X Millisekunden feuern

Debounce wartet auf eine Pause – ideal fürs Suchfeld. Aber beim Scrollen kommt nie eine Pause, solange gescrollt wird. Hier willst du regelmäßig reagieren, nur nicht bei jedem der dutzenden Events pro Sekunde. Genau das macht Throttle: höchstens ein Aufruf pro Zeitfenster.

Die Funktion

function throttle(fn, wait = 200) {
  let last = 0;
  let timer;
  return function (...args) {
    const now = Date.now();
    const rest = wait - (now - last);
    if (rest <= 0) {                 // Fenster offen → sofort feuern
      clearTimeout(timer);
      last = now;
      fn.apply(this, args);
    } else if (!timer) {             // letzten Aufruf am Fensterende nachholen
      timer = setTimeout(() => {
        last = Date.now();
        timer = null;
        fn.apply(this, args);
      }, rest);
    }
  };
}

Anwenden beim Scrollen

const onScroll = throttle(() => {
  const oben = window.scrollY > 300;
  document.querySelector('#nach-oben').classList.toggle('sichtbar', oben);
}, 150);

window.addEventListener('scroll', onScroll, { passive: true });

Statt hunderter Aufrufe pro Sekunde läuft deine Logik jetzt sauber alle 150 ms – die Seite bleibt flüssig. Das { passive: true } sagt dem Browser zusätzlich, dass du das Scrollen nicht blockierst, was das Scrollen noch geschmeidiger macht.

Merksatz: Debounce = „warte, bis Ruhe ist" (Suche). Throttle = „höchstens alle X ms" (Scroll, Resize, Mausbewegung).

Solche Performance-Details baue ich in jede Seite ein. Wenn du eine schnelle, moderne Website brauchst: bymw.de.

Quellen

• Date.now() – MDN Web Docs
• Passive event listeners – MDN Web Docs