Lors de l'utilisation de JavaScript, des déclencheurs d'événements excessifs peuvent ralentir votre application. Par exemple, un utilisateur redimensionnant la fenêtre du navigateur ou tapant dans une barre de recherche peut provoquer le déclenchement répété d'événements en peu de temps, ce qui a un impact sur les performances de l'application.

C'est là que la limitation et l'anti-rebond viennent à la rescousse. Ils vous aident à gérer la fréquence à laquelle vos fonctions sont appelées lorsque vous traitez des événements qui se déclenchent trop souvent.

? Qu’est-ce que la limitation ?

La limitation limite la fréquence à laquelle une fonction peut être exécutée. Même si un événement se produit à plusieurs reprises, une fonction limitée ne s'exécutera qu'au maximum une fois par intervalle de temps spécifié.

Exemple:

Imaginez que vous êtes à un concert et que vous prenez des photos. Mais vous décidez de ne prendre qu’une seule photo toutes les 5 minutes (peu importe à quel point la performance est excitante). C'est comme une limitation. Quel que soit le nombre de moments dignes d'une photo, vous respecterez votre règle d'une photo toutes les 5 minutes.

En JavaScript, cela peut être appliqué lorsque vous souhaitez suivre la fréquence à laquelle l'utilisateur fait défiler une page, mais vous ne souhaitez pas que la fonction soit déclenchée toutes les millisecondes. Avec la limitation, vous contrôlez la fréquence d'exécution de cette fonction.

Exemple de code :

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

Dans cet exemple, la fonction handleScroll ne s'exécutera qu'une fois toutes les 2 secondes (2 000 millisecondes), quelle que soit la vitesse ou la fréquence de défilement de l'utilisateur.

? Qu’est-ce que l’anti-rebond ?

Debouncing garantit qu'une fonction n'est appelée qu'après une certaine période d'inactivité. Si l'événement continue de se déclencher, la fonction continuera à réinitialiser la minuterie et ne se déclenchera qu'après l'arrêt de l'événement.

Exemple:

Imaginez que vous êtes dans une discussion de groupe et que vous tapez un message. Vous ne souhaitez pas envoyer une notification à vos amis chaque fois que vous appuyez sur une touche. Au lieu de cela, vous souhaitez attendre quelques secondes d’avoir arrêté de taper avant d’envoyer une notification « en train de taper… ». C'est anti-rebond : envoyer une notification uniquement après une pause dans la saisie.

En JavaScript, l'anti-rebond est souvent utilisé lorsque les utilisateurs saisissent dans un champ de recherche. Au lieu d'envoyer une requête de recherche après chaque frappe, vous pouvez attendre que l'utilisateur arrête de taper un instant avant d'effectuer la recherche.

Exemple de code :

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

Dans cet exemple, la fonction handleInput ne s'exécutera qu'après que l'utilisateur aura arrêté de taper pendant 500 millisecondes.

? Quand utiliser la limitation ou l’anti-rebond ?

⚡️ Utilisez Throttling lorsque vous souhaitez contrôler la fréquence à laquelle une fonction est appelée au fil du temps. Idéal pour des événements tels que :

=> Défilement
=> Redimensionner la fenêtre
=> Mouvements de souris

⚡️ Utilisez Anti-rebond lorsque vous souhaitez vous assurer qu'une fonction n'est appelée qu'une fois le déclenchement d'un événement terminé. Idéal pour des événements tels que :

=> Saisie dans une barre de recherche
=> Soumissions de formulaires
=> Redimensionner la fenêtre (pour des actions comme les ajustements de mise en page)

Conclusion ✅

La limitation et l'anti-rebond sont d'excellentes techniques pour améliorer les performances et la réactivité de vos applications JavaScript.

Ils vous aident à gérer la fréquence d'exécution des fonctions, évitant ainsi que votre application ne soit submergée par trop d'événements.

En comprenant quand et comment les utiliser, vous pouvez assurer le bon fonctionnement de votre code, même dans les applications les plus chargées !

Joyeux codage ! ?