La limitation des fonctions signifie que la méthode js ne s'exécutera qu'une seule fois pendant une certaine période de temps. Fonction anti-shake : signifie que lorsqu'elle est déclenchée fréquemment, le code ne sera exécuté qu'une seule fois lorsqu'il y a suffisamment de temps libre. Cet article partage principalement avec vous l'explication détaillée de la fonction anti-tremblement et limitation hautes performances de js. J'espère que cela pourra aider tout le monde.
1. Limitation des fonctions (throttle)
1. Le but de la limitation des fonctions
Par exemple, les opérations DOM nécessitent plus de mémoire et de temps CPU que les interactions non-DOM. Tenter d'effectuer successivement trop d'opérations liées au DOM peut entraîner le blocage du navigateur et parfois même un crash. Cela est particulièrement susceptible de se produire lors de l'utilisation du gestionnaire d'événements onresize dans IE. Lorsque le navigateur est redimensionné, l'événement sera déclenché en continu. Si vous essayez d'effectuer des opérations DOM dans le gestionnaire d'événements onresize, sa fréquence élevée de modifications peut faire planter le navigateur. Pour un autre exemple, pour notre fonction de recherche commune, nous lions généralement l'événement keyup et effectuons une recherche à chaque fois que vous appuyez sur le clavier. Mais notre objectif est principalement de rechercher chaque fois que nous saisissons un contenu. Afin de résoudre ces problèmes, vous pouvez utiliser des minuteries pour limiter les fonctions.
2. Principe de limitation des fonctions
Certains codes ne peuvent pas être exécutés de manière continue et répétée sans interruption. La première fois que la fonction est appelée, un minuteur est créé pour exécuter le code après un intervalle spécifié. Lorsque la fonction est appelée une deuxième fois, elle efface la minuterie précédente et en définit une autre. Si le timer précédent a déjà été exécuté, cette opération n'a aucun sens. Cependant, si le timer précédent n’a pas encore été exécuté, il est remplacé par un nouveau timer. Le but est d'exécuter la fonction uniquement après que la demande d'exécution ait été arrêtée pendant un certain temps.
3. Mode de base de limitation des fonctions
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
4. Liezi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
Explication détaillée de la fonction de limitation JavaScript Throttle
Parlez de limitation de fonction dans JS
2. Fonction anti-rebond (anti-rebond)
Avant d'expliquer cette fonction, jetons un coup d'œil à un exemple : page d'inscription, le numéro de téléphone doit être vérifié . À ce stade, nous pouvons penser à écouter l’événement de pression de touche, puis à le vérifier. Cette méthode en elle-même est correcte, mais si l'utilisateur saisit rapidement une série de numéros de téléphone portable , 11 requêtes seront déclenchées en un instant, ce qui n'est sans doute pas ce que nous souhaitons. Ce que nous voulons, c'est déclencher la demande de vérification lorsque l'utilisateur arrête de taper. À ce moment-là, la fonction anti-shake peut nous aider.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Le paramètre fonction est la fonction qui doit être anti-secousse ; le paramètre wait est le temps d'attente, en millisecondes si le paramètre immédiat est vrai, la fonction anti-rebond exécutera la fonction immédiatement ; lorsqu'il est appelé, sans attendre le temps d'attente, ce paramètre peut être utilisé, par exemple, pour empêcher plusieurs clics lors du clic sur le bouton soumettre.
Liezi :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
Cet effet semble se déclencher 6 fois au lieu de 11 fois
3. Scénarios d'application
(1). Limitation des fonctions (accélérateur)
1. Mouvements de souris/appuis fréquents, tels que mouvements de souris à haute fréquence, tir de jeu
2.
3. Barre de progression (nous n'avons peut-être pas besoin de progression de mise à jour à haute fréquence)
4 Dragover, etc.
5. Clics, tirages à haute fréquence, etc. (haha, maléfique)
(2). Fonction anti-rebond
1. événement de défilement/redimensionnement
2. Saisie de texte continue, vérification ajax/recherche de mots clés
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!