Debounce
JavaScript 🟡 MidDefinition
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.