JavaScript Academy · Lektion

Debounce vs. Throttle – selbst implementiert

Kleine Debounce- und Throttle-Hilfsfunktionen erstellen. Varianten mit nachlaufender und führender Ausführung üben und wissen, wann welche geeignet ist

Debounce vs. Throttle – selbst implementiert ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Überblick

Ziel: Häufige Ereignisse kontrollieren.

Debounce: Auf Ruhe warten und dann einmal ausführen
Throttle: Höchstens einmal pro Intervall ausführen
Führende und nachfolgende Aufrufe
Kleine, gut lesbare Hilfsfunktionen

Debounce vs. Throttle – selbst implementiert — Illustration 1

Debounce (trailing)

Trailing-Debounce setzt bei jedem Ereignis einen Timer zurück und wird einmal ausgeführt, wenn sich die Ereignisse beruhigt haben.

// Debounce (trailing): run once after events stop
function debounce(fn, wait) {
  let t = null;
  return function (...args) {
    clearTimeout(t);
    t = setTimeout(function () {
      fn.apply(null, args);
    }, wait);
  };
}

// Simulate rapid events: only the last triggers the call
const debouncedLog = debounce(function (msg) {
  console.log("debounced:", msg);
}, 10);

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    debouncedLog("final after bursts");
  }, i * 3);
}

Debounce vs. Throttle – selbst implementiert — Illustration 2

Debounce (leading)

Leading-Debounce wird sofort ausgelöst und blockiert anschließend Wiederholungen, bis das Ruheintervall endet.

// Debounce (leading): first call fires immediately, then ignore until quiet
function debounceLeading(fn, wait) {
  let t = null;
  return function (...args) {
    if (t === null) {
      fn.apply(null, args);
    }
    clearTimeout(t);
    t = setTimeout(function () {
      t = null;
    }, wait);
  };
}

// Demo: first call prints quickly; later bursts are ignored until quiet
const firstTap = debounceLeading(function (x) {
  console.log("leading:", x);
}, 12);

for (let i = 0; i < 4; i++) {
  setTimeout(function () {
    firstTap("first-then-wait");
  }, i * 3);
}

Debounce vs. Throttle – selbst implementiert — Illustration 3

Throttle (leading)

Throttle begrenzt Aufrufe auf einen pro Zeitfenster und verwirft zusätzliche Aufrufe.

// Throttle (leading): at most once per interval
function throttle(fn, wait) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= wait) {
      last = now;
      fn.apply(null, args);
    }
  };
}

// Demo: many events, but prints at most once every 10ms
const throttled = throttle(function (n) {
  console.log("throttled:", n);
}, 10);

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    throttled(i);
  }, i * 2);
}

Debounce vs. Throttle – selbst implementiert — Illustration 4

Throttle (trailing)

Trailing-Throttle stellt sicher, dass Sie am Ende des Zeitfensters trotzdem den aktuellsten Wert erhalten.

// Throttle (trailing): schedule the last call within the window
function throttleTrailing(fn, wait) {
  let last = 0;
  let timer = null;
  let queuedArgs = null;

  function invoke(args) {
    last = Date.now();
    fn.apply(null, args);
  }

  return function (...args) {
    const now = Date.now();
    const remaining = wait - (now - last);

    if (remaining <= 0) {
      // Window passed: run now
      clearTimeout(timer);
      timer = null;
      queuedArgs = null;
      invoke(args);
    } else {
      // Queue the latest args to run at the end of the window
      queuedArgs = args;
      clearTimeout(timer);
      timer = setTimeout(function () {
        timer = null;
        if (queuedArgs) {
          invoke(queuedArgs);
          queuedArgs = null;
        }
      }, remaining);
    }
  };
}

// Demo: last value in a burst is printed after the window
const trail = throttleTrailing(function (x) {
  console.log("trail:", x);
}, 10);

for (let i = 0; i < 6; i++) {
  setTimeout(function () {
    trail("v" + i);
  }, i * 3);
}

Debounce vs. Throttle – selbst implementiert — Illustration 5

Wann verwendet man was?

Auswahl:

Debounce: Suche während der Eingabe, Größenänderung – nach dem Ende der Benutzeraktivität ausführen.
Throttle: Scrollen und Ziehen – Aufrufe auf einen gleichmäßigen Takt begrenzen.
Leading für sofortiges Feedback, trailing zum Erfassen des letzten Werts.

Debounce vs. Throttle – selbst implementiert — Illustration 6

Quiz zu Debounce und Throttle

Kurzer Check: Aufrufe pro Zeitfenster begrenzen

Debounce vs. Throttle – selbst implementiert — Illustration 7

Zusammenfassung

Zusammenfassung: Sie haben Debounce mit trailing und leading, ein einfaches Throttle mit leading und ein leichtgewichtiges Throttle mit trailing geschrieben. Verwenden Sie Debounce für „nach dem Ende der Benutzeraktivität“ und Throttle für einen „gleichmäßigen Takt“.

Debounce vs. Throttle – selbst implementiert — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „Debounce vs. Throttle – selbst implementiert“ kostenlos?

Ja — der vollständige Text von „Debounce vs. Throttle – selbst implementiert“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Debounce vs. Throttle – selbst implementiert“?

Kleine Debounce- und Throttle-Hilfsfunktionen erstellen. Varianten mit nachlaufender und führender Ausführung üben und wissen, wann welche geeignet ist Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.

Wie lange dauert die Lektion „Debounce vs. Throttle – selbst implementiert“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

setTimeout, setInterval und Timer-Drift
Debounce vs. Throttle – selbst implementiert
Animations-Timing – Einstieg mit zeitbasierten Schleifen

← Zurück zu JavaScript Academy