Debounce

JavaScript 🟡 Mid

Definition

Retarde l'execution d'une fonction jusqu'a ce qu'un delai se soit ecoule sans nouvel appel. Chaque appel reinitialise le timer. N'execute que le dernier appel.

Analogie

L'ascenseur qui attend que plus personne n'entre pendant 3 secondes avant de fermer les portes.

Exemple de code

function debounce(fn, ms) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), ms);
  };
}
const search = debounce(query => fetch(query), 300);

Cas d'usage

Recherche en temps reel (attendre que l'utilisateur arrete de taper), resize handler, auto-save.

Anti-pattern

Debounce avec un delai trop long qui rend l'interface non-reactive.
#core#performance#pattern#interview