Javascript debounce Funktionen

Beim Entprellen (engl. javascript debounce) geht’s darum, Funktionsaufrufe zu bündeln und nur den ersten oder letzten Call wirklich auszuführen:

– Letzter Call: Jeder neue Trigger löscht den alten Timer, erst nach timeout wird mainFunc ausgeführt.

function debounce(mainFunc, timeout = 300) {
  let timeoutID;
  return (...args) => {
    clearTimeout(timeoutID);
    timeoutID = setTimeout(() => {
      mainFunc.apply(this, args);
    }, timeout);
  };
}
const process = debounce(() => searchSomething());

Hier ruft process() erst nach 300 ms ohne neue Eingaben searchSomething() auf.

– Nur erster Call: Beim ersten Trigger läuft mainFunc sofort, alle weiteren innerhalb timeout werden ignoriert. Nach Ablauf wird der Timer zurückgesetzt.

function debounce(mainFunc, timeout = 300) {
  let timeoutID;
  return (...args) => {
    if (!timeoutID) {
      mainFunc.apply(this, args);
    }
    clearTimeout(timeoutID);
    timeoutID = setTimeout(() => {
      timeoutID = undefined;
    }, timeout);
  };
}

Damit startet searchSomething() direkt beim ersten Tipp – alle folgenden Buchstaben in den nächsten 300 ms werden weggedebounced.

Für React-Nutzer lässt sich das Ganze mit useCallback kombinieren:

const process = useCallback(debounce(() => searchSomething()), []);

So bleibt der Debounce-Funktion-Wrapper stabil und dein Component rendert nicht unnötig neu.