Limitation des fonctions et stabilisation des fonctions dans JS (tutoriel détaillé)

Cet article présente principalement l'analyse des problèmes de limitation des fonctions JS et d'anti-secousse. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Question 1 : Si le dom traîne et. La fonction drop est implémentée, mais lors de la liaison de l'événement glisser, j'ai constaté que chaque fois que l'élément bougeait un peu, un grand nombre de fonctions de rappel étaient déclenchées, provoquant le gel direct du navigateur. Que dois-je faire à ce moment-là ?

**Question 2 :** Si un bouton est lié à l'événement post-envoi du formulaire, mais que l'utilisateur clique parfois plusieurs fois dans des conditions de réseau extrêmement mauvaises, le bouton provoque le formulaire doit être soumis à plusieurs reprises. Comment éviter les soumissions multiples ?

Afin de faire face au scénario ci-dessus, les deux concepts d'anti-shake de fonction et de limitation de fonction ont émergé :

Ces deux méthodes permettent de contrôler le nombre de temps d'exécution de. la fonction sur la timeline.

Fonction anti-rebond (anti-rebond)

Concept : Exécuter le rappel n secondes après le déclenchement de l'événement s'il y a un autre événement dans les n secondes. , est déclenché, la minuterie redémarre.

Exemples dans la vie : Si quelqu'un entre dans l'ascenseur (déclenche l'événement), l'ascenseur partira dans 10 secondes (exécute l'écouteur d'événement). À ce moment-là, si quelqu'un entre à nouveau dans l'ascenseur (à nouveau dans les 10 secondes). déclencher l'événement), il faut attendre encore 10 secondes avant de démarrer (re-timing).

Fonction throttle (throttle)

Concept : Spécifier une unité de temps, dans cette unité de temps, il ne peut y avoir qu'un seul événement déclencheur Le rappel La fonction est exécutée. Si un événement est déclenché plusieurs fois dans la même unité de temps, un seul événement prendra effet.

Exemples dans la vie : Nous savons qu'une affirmation actuelle est que lorsque plus de 24 images sont lues en continu en 1 seconde, une animation cohérente se forme dans la vision humaine, donc dans le film La lecture (utilisée pour être, mais je ne le sais pas maintenant) est essentiellement joué à une vitesse de 24 images par seconde. Pourquoi pas 100 images ou plus Parce que lorsque 24 images peuvent répondre aux besoins de la vision humaine, 100 images sembleront être un gaspillage ? ressources. .

Tableau d'analyse

Supposons que la durée totale de notre observation est de 10 secondes, et 1 seconde est spécifiée comme temps d'intervalle minimum pour un événement.

Si la fréquence des événements déclencheurs est de 0,5 s/temps, alors la fonction anti-tremblement est comme indiqué sur la figure

Parce que ce n'est jamais possible d'attendre une seconde avant d'être déclenché à nouveau, donc au final aucun des événements n'a abouti.

La fonction d'étranglement est comme indiqué sur la figure

Parce qu'elle est contrôlée au plus une fois par seconde et que la fréquence est de 0,5 s/temps, il y a un événement tous les deux vides. Le contrôle final est de 1 s/temps

Si la fréquence des événements déclencheurs est de 2 s/temps, alors la fonction

anti-secousse est comme indiqué sur la figure

car 2s/temps
est déjà supérieur au temps minimum spécifié, il se déclenche donc toutes les deux secondes.

La fonction de limitation est comme indiqué sur la figure

De même, 2 s/temps est supérieur au temps minimum requis, donc chaque déclencheur prend effet.

Scénarios d'application

Pour la fonction anti-tremblement, il existe les scénarios d'application suivants :

• Ajouter la fonction anti-tremblement au bouton pour empêcher le le formulaire ne soit pas soumis plusieurs fois.

• Lors de la vérification AJAX pour une saisie continue dans la zone de saisie, l'utilisation de la fonction anti-shake peut réduire efficacement le nombre de requêtes.

• Déterminer si le défilement glisse vers le bas, événement de défilement + fonction anti-shake

En général, il convient pour répondre à plusieurs événements à la fois

Pour la limitation des fonctions, il existe les scénarios suivants :

• Taux de rafraîchissement dans le jeu

• Élément DOM faire glisser

• Fonction pinceau de toile

En général, elle convient à un grand nombre d'événements pour être uniformément répartis et déclenchés dans le temps.

Code source

Fonction anti-shake :

function debounce(fn, wait) {
 var timer = null;
 return function () {
  var context = this
  var args = arguments
  if (timer) {
   clearTimeout(timer);
   timer = null;
  }
  timer = setTimeout(function () {
   fn.apply(context, args)
  }, wait)
 }
}
var fn = function () {
 console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次
setInterval(debounce(fn,2000),1000) // 不会触发一次（我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）

La raison pour laquelle il renvoie une fonction est parce que le l'anti-shake lui-même ressemble plus à une modification de fonction, j'ai donc fait un curry de fonction. La fermeture est également utilisée à l'intérieur, et la variable de fermeture est la minuterie.

Limitation de fonction

function throttle(fn, gapTime) {
 let _lastTime = null;
 return function () {
 let _nowTime = + new Date()
 if (_nowTime - _lastTime > gapTime || !_lastTime) {
  fn();
  _lastTime = _nowTime
 }
 }
}
let fn = ()=>{
 console.log('boom')
}
setInterval(throttle(fn,1000),10)

L'image ci-dessous montre une simple limitation de fonction implémentée. Le résultat est un boom

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment ajouter un tableau à un objet en js

Comment créer un processus de projet complet à l'aide de gulp

Utilisez axios pour télécharger des fichiers dans vue

Comment agrandir les images en JavaScript

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!