Comment l'anti-rebond JavaScript améliore-t-il la réactivité et empêche-t-il les appels de fonctions excessifs ?

Comprendre l'anti-rebond en JavaScript

La fonction « anti-rebond » en JavaScript est une technique utilisée pour améliorer la réactivité et empêcher les appels de fonction excessifs, en particulier lorsque gérer des événements fréquents tels que le redimensionnement, le défilement ou la saisie au clavier.

Comment anti-rebond Works

La fonction en question définit une variable privée, timeout, qui fait office de timer. Lorsque la fonction est appelée, elle vérifie si l'indicateur immédiat est défini sur true. Si c'est le cas et qu'il n'y a pas de délai d'attente actif, la fonction est exécutée immédiatement. Sinon, un délai d'attente est défini avec un délai spécifié par le paramètre wait.

Les appels ultérieurs à la fonction effaceront le délai d'attente existant et le réinitialiseront, garantissant que la fonction n'est exécutée qu'après une période d'inactivité définie.

Explication de l'extrait de code

Le code fourni contient une erreur qui empêche le mode immédiat de fonctionner correctement. La version corrigée du lien vérifie (immédiat && !timeout) avant de configurer le délai d'attente.

Dans cette version corrigée, si immédiat est vrai et qu'il n'y a pas de délai d'attente actif, la fonction s'exécute immédiatement. Si immédiat est faux ou s'il y a déjà un délai d'attente, le délai d'attente est réinitialisé pour garantir que la fonction n'est exécutée qu'après le délai spécifié.

Exemple d'utilisation

L'anti-rebond est utile dans les situations où des appels de fonction répétés seraient inefficaces ou perturbateurs. Par exemple, dans une galerie d'images avec défilement piloté par la souris, l'anti-rebond peut empêcher une charge excessive sur le serveur en limitant le nombre de requêtes de chargement d'images.

Dans l'exemple fourni, la fonction onMouseMove est anti-rebond pour enregistrer uniquement la souris. coordonnées toutes les 50 millisecondes. Cela évite que la fonction de journalisation ne soit appelée de manière excessive lors de mouvements rapides de la souris, améliorant ainsi l'efficacité et la réactivité de l'application.

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!