Limitation des fonctions JavaScript et apprentissage des points de connaissance anti-rebond des fonctions

Cet article partage des points de connaissances liés à la limitation des fonctions JavaScript et à l'anti-rebond des fonctions. Les amis dans le besoin peuvent l'apprendre et s'y référer.

Concept

Throttle (accélérateur) empêche une fonction de s'exécuter trop fréquemment et réduit les appels qui s'exécutent trop rapidement. Throttle

Debounce Debounce consiste à exécuter des appels de fonction continus pendant une certaine période de temps une seule fois

scénarios d'application d'accélérateur

• Implémentation de la fonction de glisser d'élément DOM (mousemove)

• Événement Mousedown/keydown du jeu de tir (une seule balle peut être tirée par unité de temps)

• Calculer la distance de mouvement de la souris (mousemove)

• Canvas simule la fonction du plan de travail (mousemove

• Rechercher Lenovo (keyup

• Écoutez les événements de défilement pour déterminer s'il faut automatiquement en charger davantage lorsqu'il atteint le bas de la page : après avoir ajouté un anti-rebond au défilement, ce n'est que lorsque l'utilisateur arrête de faire défiler qu'il sera déterminé s'il a atteint le bas de la page ; S'il s'agit d'un accélérateur, il sera jugé une fois à chaque fois tant que la page défile
  

scénario d'application anti-rebond

Chaque fois que le redimensionnement/le défilement déclenche des événements statistiques

Vérification de la saisie de texte (envoyer des demandes de vérification AJAX après la saisie de texte continue, il suffit de vérifier une fois)

Implémentation de la fonction anti-rebond

Prenons l'événement scroll comme exemple pour explorer comment imprimer une chaîne hello world une fois la fenêtre défilée si elle n'est pas limitée ou anti-rebond :

window.onscroll = function () {
 console.log('hello world');
}

De cette façon, à chaque défilement, plusieurs hello worlds seront réellement imprimés. L'idée derrière la fonction anti-rebond est qu'un certain code ne peut pas être exécuté en continu sans interruption. Créez une minuterie pour exécuter le code après un intervalle de temps spécifié. La fonction est appelée une deuxième fois, elle efface le timer précédent et en définit un autre. Si le timer précédent a déjà été exécuté, cette opération n'a aucune signification. Cependant, si le timer précédent n'a pas encore été exécuté, il sera en fait réinitialisé. Il est remplacé par un nouveau timer. Le but est d'exécuter la fonction uniquement après l'arrêt de la demande d'exécution pendant un certain temps. "Height Three" donne le code anti-rebond le plus concis et classique, comme suit :

<🎜. >

Apporter quelques modifications supplémentaires

function debounce(method, context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function() {
 method.call(context);
 }, 1000);
}

function print() {
 console.log('hello world');
}

window.onscroll = function() {
 debounce(print);
};

Mise en œuvre de la limitation des fonctions

function debounce(delay, action) {
 var tId;
 return function () {
  var context = this;
  var arg = arguments;
  if (tId) clearTimeout(tId);
  tId = setTimeout(function () {
   action.apply(context, arg);
  }, delay);
 }
}

window.onscroll = debounce(1000, print);

La limitation des fonctions consiste à modifier les fonctions exécutées en continu en une période de temps fixe à exécuter par intermittence
<. 🎜> La première consiste à utiliser l'horodatage pour déterminer si l'heure d'exécution du rappel a été atteinte, à enregistrer l'horodatage de la dernière exécution, puis à exécuter le rappel à chaque fois que l'événement est déclenché. Déterminez si l'intervalle de temps entre l'horodatage actuel et le. L'horodatage de la dernière exécution est *s. Si tel est le cas, exécutez-le et mettez à jour l'horodatage de la dernière exécution, et ainsi de suite.

La deuxième méthode consiste à utiliser une minuterie. Par exemple, lorsque l'événement de défilement est déclenché pour la première fois, imprimez un bonjour tout le monde, puis définissez une minuterie de 1 000 ms. Après cela, chaque fois que l'événement de défilement est déclenché. déclenché, un rappel est déclenché si un minuteur existe déjà, le rappel n'exécute pas la méthode jusqu'au démarrage du minuteur, le gestionnaire est effacé, puis le minuteur est réinitialisé.

var throttle = function(delay, action) {
 var last = 0;
 return function() {
  var curr = new Date();
  if (curr - last > delay) {
   action.apply(this, arguments);
   last = curr;
  }
 }
}

Méthode de mise à jour :

var throttle = function(delay, action) {
 var timeout;
 var later = function () {
  timeout = setTimeout(function(){
   clearTimeout(timeout);
   // 解除引用
   timeout = null;
  }, delay);
 };
 later();
 if (!timeout) {
  action.apply(this, arguments);
  later();
 }
}

Ce qui précède représente l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo JavaScript

 !

function throttlePro(delay, action) {
 var tId;
 return function () {
  var context = this;
  var arg = arguments;
  if (tId) return;
  tId = setTimeout(function () {
   action.apply(context, arg);
   clearTimeout(tId);
   // setTimeout 返回一个整数，clearTimeout 之后，tId还是那个整数,setInterval同样如此
   tId = null;
  }, delay);
 }
}

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!