JavaScript Debounce Funktion

Eine Debounce-Funktion begrenzt, wie oft eine Funktion aufgerufen werden kann. Sie ist nützlich zur Performance-Optimierung bei der Behandlung von Events wie Scrollen, Größenänderung oder Tippen.

Verwendung

function debounce(func, wait) {
  let timeout;

  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Beispiel-Verwendung
const handleResize = debounce(() => {
  console.log('Fenstergröße geändert!');
}, 250);

window.addEventListener('resize', handleResize);

Funktionsweise

1. Die Debounce-Funktion gibt eine neue Funktion zurück, die Ihre ursprüngliche Funktion umschließt
2. Bei Aufruf setzt sie einen Timer, um Ihre Funktion nach der angegebenen Wartezeit auszuführen
3. Wird sie erneut aufgerufen, bevor der Timer abläuft, wird der vorherige Timer abgebrochen und ein neuer gesetzt
4. Dies stellt sicher, dass Ihre Funktion erst ausgeführt wird, nachdem der Benutzer das Event nicht mehr auslöst

Häufige Anwendungsfälle

• Sucheingabefelder (warten, bis der Benutzer aufhört zu tippen)
• Window-Resize-Handler
• Scroll-Event-Listener
• Formularvalidierung
• API-Request-Throttling