La fonction debounce() en JavaScript

1. Comprendre le terme Debounce en JavaScript
2. Utiliser la fonction debounce() en JavaScript

Cet article vous apprendra comment utiliser la fonction JavaScript debounce() pour améliorer les performances de vos applications.

Comprendre le terme Debounce en JavaScript

JavaScript utilise la technique anti-rebond pour accélérer les performances du navigateur. Un anti-rebond est un parent d’un étranglement, et ils améliorent tous les deux les performances de l’application en ligne.

Néanmoins, ils sont observés dans de nombreux contextes. Un anti-rebond est utilisé lorsque tout ce que nous considérons est l’état final.

Par exemple, ils retardent la récupération des résultats de recherche avec frappe anticipée jusqu’à ce que l’utilisateur ait fini de taper. L’outil idéal à utiliser est une manette des gaz si nous voulons contrôler la vitesse de tous les états intermédiaires.

Utiliser la fonction debounce() en JavaScript

Voici une illustration de code pour vous aider à comprendre comment faire rebondir une fonction :

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

function userInput() {
  console.log('Changing data');
}

const workonChange = debounce(() => userInput());

Exécuter le code

Alors, que se passe-t-il ici ? Le debounce() est une fonction unique qui remplit deux fonctions :

• Attribution d’une portée à la variable timer
• Configuration de votre fonction pour qu’elle s’exécute à une heure précise

Examinons le premier cas d’utilisation avec saisie de texte pour voir comment cela fonctionne.

La fonction debounce() réinitialise initialement le minuteur à l’aide de clearTimeout lorsqu’un visiteur écrit la première lettre et relâche la touche (timer). L’étape n’est pas requise pour le moment car rien n’est planifié.

La fonction userInput() devrait être appelée en 3000 millisecondes (3 secondes). Cependant, si le visiteur continue à taper, chaque release essentielle relancera la fonction debounce().

Chaque invocation doit réinitialiser le minuteur, ou, en d’autres termes, annuler toutes les préparations userInput() antérieures et les reprogrammer pour une nouvelle heure - 3 000 millisecondes dans le futur. Cela continuera tant que le visiteur maintiendra les frappes dans les 3000 millisecondes.

Comme la planification précédente ne sera pas effacée, userInput() sera invoqué.

Production:

Vous verrez que la méthode setTimeout continue de différer lorsque vous tapez s, h, i, ou v (malgré la fonction appelée userInput). Lorsque nous nous arrêtons pendant trois secondes lors de la frappe, la fonction principale est imprimée : Modification des données.

L’anti-rebond améliore la vitesse de l’application en n’appelant les fonctions qu’après un certain temps de pause plutôt qu’à chaque opération. Cependant, vous n’avez pas à accomplir cela par vous-même.

Une fonction debounce est disponible en Lodash par exemple. Les contributeurs ont amélioré des librairies telles que Lodash pour améliorer la fonction debounce.

Nous avons discuté de ce qu’est l’anti-rebond, de son utilité et de la manière de le faire en JavaScript dans cet article.