Comment la fonction anti-rebond de JavaScript peut-elle améliorer les performances du gestionnaire d'événements ?

Fonction anti-rebond en JavaScript

La fonction "anti-rebond" est un utilitaire en JavaScript utilisé pour améliorer les performances et la réactivité des gestionnaires d'événements. Il empêche qu'une fonction soit exécutée plusieurs fois de suite, en attendant qu'un intervalle spécifié s'écoule avant de l'exécuter à nouveau. Ceci est particulièrement utile dans les scénarios où des entrées fréquentes de l'utilisateur peuvent conduire à des appels de fonction excessifs ou inutiles.

Comment fonctionne la fonction anti-rebond

La fonction anti-rebond prend trois arguments : la fonction à être exécutée (func), le temps d'attente en millisecondes (wait) et un indicateur (immédiat) qui spécifie si la fonction doit être exécutée immédiatement dès le premier call.

La fonction anti-rebond renvoie une nouvelle fonction qui entoure la fonction d'origine. Lorsque cette fonction encapsulée est invoquée, elle vérifie si un minuteur en attente est en cours d'exécution. Si tel est le cas, il efface le minuteur et définit un nouveau minuteur avec le temps d'attente spécifié. S'il n'y a pas de minuterie en attente, il vérifie l'indicateur immédiat.

• Si immédiat est vrai, la fonction est exécutée immédiatement et une nouvelle minuterie est définie.
• Si immédiat est faux, une nouvelle minuterie est définie et la fonction n'est pas exécutée jusqu'à l'expiration de la minuterie.

Lorsque la minuterie expire, la fonction encapsulée efface la minuterie et appelle la fonction d'origine. Cela garantit que la fonction d'origine n'est pas exécutée plus souvent que le temps d'attente spécifié.

Exemple d'utilisation

Considérez le scénario suivant dans lequel vous souhaitez mettre à jour l'affichage avec la souris. coordonnées de mouvement :

function onMouseMove(e) {
  // Display mouse coordinates
}

window.addEventListener('mousemove', onMouseMove);

Si l'utilisateur déplace la souris rapidement, la fonction onMouseMove sera appelée à plusieurs reprises, ralentissant potentiellement le navigateur. Pour améliorer les performances et la réactivité, nous pouvons utiliser la fonction anti-rebond :

const debouncedMouseMove = debounce(onMouseMove, 50);

window.addEventListener('mousemove', debouncedMouseMove);

Avec cette implémentation, la fonction onMouseMove ne sera appelée que toutes les 50 millisecondes, quelle que soit la fréquence à laquelle l'utilisateur déplace la souris. Cela améliore la réactivité de l'application et réduit la charge sur le navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!