Quelle est la différence entre debounce et throttle ?

Question

Accepted Answer

Les deux limitent la fréquence d'exécution d'une fonction en réaction à des événements rapides et répétés — mais avec des stratégies de synchronisation différentes.

- **Debounce** : exécute la fonction uniquement **après l'arrêt de l'activité** pendant N ms. Réinitialise le minuteur à chaque appel. → « attendez qu'ils finissent ».
- **Throttle** : exécute la fonction **au maximum une fois par N ms** lors d'une activité continue. → « exécuter à une vitesse régulière ».

```text
events:    x x x x x x x ........ x x x
debounce:                 ↑ (fires once, after the pause)
throttle:  ↑     ↑     ↑           ↑     (fires periodically)
```

## Implémentation Debounce

```js
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                  // cancel the previous scheduled call
    timer = setTimeout(() => fn(...args), ms); // schedule a new one
  };
}
const search = debounce(q => api.search(q), 300); // only searches after typing pauses
```

## Implémentation Throttle

```js
function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); } // run at most every ms
  };
}
```

## Quand utiliser lequel

- **Debounce** : recherche au fur et à mesure de la saisie, sauvegarde automatique, fin de redimensionnement, validation après l'arrêt de la saisie de l'utilisateur — vous voulez la valeur **finale**.
- **Throttle** : gestionnaires de défilement, mousemove, glissement, limitation de débit — vous voulez des mises à jour **périodiques** lors de l'action en cours.

## Pourquoi c'est important

Les deux empêchent d'exécuter un travail coûteux (appels API, recalcul de mise en page) des centaines de fois par seconde, ce qui est une technique de performance front-end clé.