Méthodes pour empêcher le déclenchement à haute fréquence et les appels à haute fréquence de fonctions d'événement dans les compétences JavaScript_javascript

La fonction la plus basique de JavaScript dans les pages Web est de surveiller ou de répondre aux actions des utilisateurs, ce qui est très utile. Certaines actions de l'utilisateur sont très fréquentes et d'autres très rares. Certaines fonctions d'écoute s'exécutent à la vitesse de l'éclair, tandis que d'autres sont lourdes et peuvent entraîner la mort du navigateur. Prenons l'exemple de l'événement de redimensionnement de la fenêtre du navigateur. Cet événement sera déclenché une fois pour chaque changement d'échelle de la taille de la fenêtre du navigateur. Si l'écouteur est grand, votre navigateur sera bientôt submergé.

Évidemment, nous ne pouvons pas autoriser la suppression du navigateur, mais nous ne pouvons pas supprimer l'écouteur de suppression. Cependant, nous pouvons limiter la fréquence des appels de fonctions et affaiblir l’impact de l’exécution des fonctions événementielles. Au lieu de déclencher la fonction d'écoute une fois pour chaque changement de taille de la fenêtre, nous pouvons désormais définir l'intervalle minimum de déclenchement de la fonction d'écoute pour qu'il soit supérieur à un certain nombre de millisecondes, afin qu'elle maintienne un canal d'appel raisonnable et garantisse que l'utilisateur l'expérience n'est pas détruite. Il existe une bonne bibliothèque d'outils js appelée Underscore.js, qui dispose d'une méthode simple qui vous permet de créer facilement des écouteurs qui réduisent la fréquence des déclencheurs de fonctions d'événement.

Code JavaScript

Le code de l'écouteur à réduction de fréquence est très simple :

Copier le code Le code est le suivant :

//Créer un écouteur
var updateLayout = _.debounce(function(e) {

// Met à jour toute la mise en page ici

}, 500); // Exécuter toutes les 500 millisecondes au moins

// Ajouter l'écouteur d'événement
window.addEventListener("resize", updateLayout, false);
...La couche inférieure de ce code Underscore.js utilise en fait un intervalle pour vérifier la fréquence des appels de fonction d'événement :

// Renvoie une fonction qui, tant qu'elle continue à être invoquée, ne le sera pas
// être déclenché. La fonction sera appelée après avoir cessé d'être appelée
// N millisecondes. Si `immediate` est passé, déclenchez la fonction sur le
. // bord d'attaque, au lieu du bord de fin.
_.debounce = function(func, attendre, immédiat) {
var délai d'attente ;
return function() {
var contexte = ceci, args = arguments;
var plus tard = function() {
délai d'attente = nul ;
If (!immediate) func.apply(context, args);
};
var callNow = immédiat && !timeout;
clearTimeout(timeout);
timeout = setTimeout(plus tard, attendez);
if (callNow) func.apply(context, args);
};
};

Le code n’est pas particulièrement compliqué, mais c’est une bénédiction de ne pas avoir à l’écrire moi-même. Cette fonction anti-rebond ne dépend pas des autres fonctions Underscore.js, vous pouvez donc ajouter cette méthode à votre bibliothèque d'outils js préférée, comme jQuery ou MooTools, très facilement :

Copier le code Le code est le suivant :

//MooTools
Fonction.implement({
anti-rebond : fonction (attendre, immédiat) {
var délai d'attente,
       func = ceci;
return function() {
var contexte = ceci, args = arguments;
var plus tard = function() {
Délai d'attente = nul ;
If (!immediate) func.apply(context, args);
};
var callNow = immédiat && !timeout;
ClearTimeout(délai d'attente);
Timeout = setTimeout(plus tard, attendez);
Si (callNow) func.apply(context, args);
};
>
});

// Utilisez-le !
window.addEvent("resize", myFn.debounce(500));

Comme mentionné ci-dessus, l'événement de redimensionnement de la fenêtre est l'endroit le plus courant pour utiliser l'opération de réduction de fréquence. Un autre endroit courant consiste à donner des invites d'achèvement automatiques basées sur la saisie clé de l'utilisateur. J'adore collecter des extraits de code comme celui-ci qui peuvent facilement rendre votre site Web plus efficace. Il est également recommandé d’étudier Underscore.js, qui propose un grand nombre de fonctions très utiles.