Debounce

JavaScript 🟡 Mid

Définition

Retarde l'exécution d'une fonction jusqu'a ce qu'un délai se soit écoulé sans nouvel appel. Chaque appel réinitialisé le timer. N'exécuté 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 réel (attendre que l'utilisateur arrête de taper), resize handler, auto-save.

Anti-pattern

Debounce avec un délai trop long qui rend l'interface non-réactivé.
#core#performance#pattern#interview

En entretien

  1. Explique-moi le debounce et donne un cas d'usage.

    Le debounce retarde l'exécution d'une fonction jusqu'à ce qu'un délai se soit écoulé sans nouvel appel, chaque appel réinitialisant le timer, seul le dernier s'exécute. On l'utilise typiquement pour une recherche en temps réel, un resize handler ou un auto-save.

  2. Quand éviter le debounce ?

    Quand le délai choisi est trop long, l'interface devient non réactive pour l'utilisateur. Dans ce cas, throttle est souvent préférable car il garantit une exécution régulière.

Dans l'actu

  • 22/09 Node.js 26.10.0 (Current) ajoute util.debounce() et util.throttle() natifs, crypto.parsePKCS12() pour lire les certificats .pfx/.p12, fs.openAsBlobSync(), et le transfert de net.BoundSocket vers les worker threads et processus enfants. Semaine 39 · 21 – 27 septembre 2026 →
  • 22/09 Node.js 26.10.0 apporte `util.debounce()` et `util.throttle()` natifs, `crypto.parsePKCS12()` pour les certificats .pfx/.p12 et `fs.openAsBlobSync()`. Bilan septembre 2026 →

Fiche mise à jour le 2026-09-27

← → au clavier pour passer d'une fiche à l'autre