Comprendre et Créer du Debounce (délai) en JavaScript ?

Qu’est-ce que le debounce en JavaScript ?

Historique

Historiquement, le debounce était utilisé par les ingénieurs électroniques pour limiter les interférences causées par les vibrations émises lors de l’activation d’un interrupteur.

Ces vibrations, appelées « rebonds » (bouncing), provoquent des oscillations rapides et indésirables du signal.

• Sans debounce : cliquer sur un interrupteur pourrait ainsi provoquer plusieurs activations et désactivations du circuit, ce qui n’est pas souhaitable.
• Avec debounce : le délai garantit que le signal ne change d’état qu’une seule fois et de façon nette.

Debounce en programmation

Le debounce est un mécanisme aujourd’hui largement utilisé en programmation pour limiter le nombre d’appels à une fonction.

En développement web, il est généralement utilisé pour éviter d’envoyer trop de requêtes à un serveur.

Dans ce tutoriel, nous allons voir comment créer du debounce en JavaScript pour optimiser les performances d’une application web.

Comment créer du debounce en JavaScript ?

Pour comprendre l’intérêt du debounce en JavaScript, nous prendrons l’exemple d’un moteur de recherche proposant des suggestions de résultats (autocomplétion) au fur et à mesure de la saisie de l’utilisateur.

Voici un extrait de code HTML/JS illustrant ce cas d’usage :

<input type="search" id="searchInput" placeholder="Tapez votre recherche..." />

const searchInput = document.getElementById('searchInput');

searchInput.addEventListener('input', () => {
  const query = searchInput.value;
  loadResults(query);
});

function loadResults(query) {
  // Requête HTTP demandant au serveur les résultats correspondant à la recherche ...
}

Il est temps de créer du debounce pour optimiser cela !

Étape 1 : Créer une fonction debounce()

Pour créer du debounce en JavaScript, nous allons définir une fonction debounce() prenant en paramètre :

1. Une fonction func (la fonction à limiter)
2. Un délai timeout (en millisecondes, par défaut 300 ms).

Cette fonction debounce() limite la fréquence (avec timeout) à laquelle une autre fonction (reçue dans func), peut être exécutée.

function debounce(func, timeout = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

1. À l’intérieur de la fonction debounce(), une variable timer est déclarée pour suivre le délai.
2. La fonction debounce retourne une nouvelle fonction qui accepte un nombre quelconque d’arguments (récupérés avec le spread operator ...args).
3. Lorsque cette nouvelle fonction est appelée, elle annule tout délai existant avec clearTimeout(timer). Un nouveau délai est ensuite défini avec setTimeout().
4. func.apply(this, args) appelle func() avec le contexte this et les arguments passés.

Étape 2 : Utiliser la fonction debounce()

Maintenant que nous avons notre fonction debounce(), nous allons l’appliquer sur loadResults() pour limiter la fréquence des requêtes HTTP dans notre exemple de moteur de recherche.

Ce délai sera effectif au travers de la constante debouncedLoadResults.

const searchInput = document.getElementById('searchInput');
const debouncedLoadResults = debounce(loadResults, 500);

searchInput.addEventListener('input', () => {
  const query = searchInput.value;
  debouncedLoadResults(query);
});

function loadResults(query) {
  // Requête HTTP demandant au serveur les résultats correspondant à la recherche ...
}