Kévin Subileau

Espace personnel

clock

Debounce et throttle : limiter les appels successifs à une fonction Javascript

Lorsque l'on développe une application Web réagissant à certains évènements en Javascript, comme le redimensionnement de la fenêtre, le mouvement de la souris ou la frappe au clavier, les fonctions rattachées à ces événements risquent d'être appelées très fréquemment. Si le code contenu dans ces fonctions est coûteux en ressources, cela peut ralentir considérablement l'application Web.

Pour améliorer les performances, ou plutôt ne pas les plomber, il existe deux techniques simples, appelées debounce et throttle. Toutes deux permettent de réduire le nombre d'appels à une fonction dans un intervalle de temps donné. En effet, il est souvent inutile d'exécuter ces fonctions à chaque fois que l’événement est déclenché.

Imaginons par exemple que l'on souhaite synchroniser sur le serveur, via des appels AJAX, le contenu d'un champ de saisie au fur et à mesure que l'utilisateur tape le texte (comme le fait Google Docs par exemple). Dans ce cas, plutôt que de solliciter le serveur à chaque caractère saisi ou inutilement lorsque le texte reste inchangé, il peut être plus judicieux de sauvegarder le texte toutes les 5 secondes tant que l'utilisateur le modifie, et de ne plus faire de requêtes lorsque que le texte reste inchangé. Et c'est exactement ce que la fonction throttle permet de faire.

Cependant, bien que ces deux techniques soit assez similaires, il existe une différence fondamentale dans leurs fonctionnements qu'il est important de bien comprendre pour les utiliser correctement.

Je vais donc vous présenter ces deux méthodes l'une après l'autre, en vous expliquant leurs fonctionnements et en vous donnant le code Javascript nécessaire pour les mettre en place.
Lire la suite →