La fonction la plus élémentaire de JavaScript dans les pages Web est d'écouter ou de répondre aux actions des utilisateurs, ce qui est très utile. Les actions de certains utilisateurs sont très fréquentes, tandis que d'autres sont très rares. Certaines fonctions de l'auditeur sont exécutées comme la foudre, tandis que certaines sont lourdes pour faire glisser le navigateur à mort. Prenez l'événement de redimensionnement de la fenêtre du navigateur par exemple. Cet événement sera déclenché une fois dans chaque changement d'échelle de la taille de la fenêtre du navigateur. Si l'auditeur est grand, votre navigateur sera bientôt entraîné.
De toute évidence, nous ne pouvons pas permettre au navigateur d'être traîné vers le bas, mais nous ne pouvons pas supprimer l'auditeur. Cependant, nous pouvons limiter la fréquence des appels de fonction et affaiblir l'impact du fonctionnement de la fonction des événements. Par rapport à la permettant du changement de taille de la fenêtre déclenche la fonction de l'écoute une fois, nous pouvons maintenant écouter l'intervalle minimum de déclenchement de la fonction qui doit être supérieur au nombre de millisecondes, de sorte qu'il maintient un canal d'appel raisonnable et garantit que l'expérience utilisateur ne détruit pas. Il existe une bonne bibliothèque d'outils JS appelée sous-ore.js, qui a une méthode simple qui vous permet de créer facilement des auditeurs qui réduisent la fréquence des fonctions d'événement déclenchant.
Code javascript
Le code de l'auditeur Downwitch est simple:
La copie de code est la suivante:
// Créer un auditeur
var updateLayout = _.debounce (fonction (e) {
// fait toute la mise à jour de la mise en page ici
}, 500); // fonctionne une fois tous les 500 millisecondes au moins
// Ajouter l'écouteur de l'événement
window.addeventListener ("redimensit", udateLayout, false);
... La couche sous-jacente de ce code de soulignement.js utilise en fait l'intervalle pour vérifier la fréquence des appels de fonction d'événement:
// renvoie une fonction, que, tant qu'elle continue d'être invoquée, ne sera pas
// être déclenché. La fonction sera appelée après celle de s'être demandé
// n millisecondes. Si «immédiat» est passé, déclenchez la fonction sur le
// Le bord d'attaque, au lieu de la fuite.
_.debounce = fonction (func, attendre, immédiat) {
Var Timeout;
return function () {
var context = this, args = arguments;
var ulter = function () {
timeout = null;
si (! immédiat) func.Apply (contexte, args);
};
var callnow = immédiat &&! timeout;
ClearTimeout (temps mort);
timeout = setTimeout (plus tard, attendez);
if (callnow) func.Apply (contexte, args);
};
};
Le code n'est pas particulièrement compliqué, mais c'est aussi une sorte de bonheur de ne pas avoir à l'écrire vous-même. Cette fonction de débouchement ne dépend pas d'autres fonctions sous-traitant.js, vous pouvez donc ajouter cette méthode à votre bibliothèque d'outils JS préférée, telle que jQuery ou Mootools, ce qui est facile:
La copie de code est la suivante:
// mootools
Function.implement ({
Débounce: fonction (attendre, immédiat) {
Var Timeout,
func = this;
return function () {
var context = this, args = arguments;
var ulter = function () {
timeout = null;
si (! immédiat) func.Apply (contexte, args);
};
var callnow = immédiat &&! timeout;
ClearTimeout (temps mort);
timeout = setTimeout (plus tard, attendez);
if (callnow) func.Apply (contexte, args);
};
}
});
// Utilisez-le!
window.addevent ("redimensit", myfn.debounce (500));
Comme mentionné ci-dessus, l'événement de redimensionnement de la fenêtre est l'endroit le plus courant pour utiliser le fonctionnement de la fréquence. Un autre endroit commun est qu'une invite d'achèvement automatique est donnée en fonction de l'entrée de clé de l'utilisateur. J'aime vraiment collecter ces extraits de code, ce qui peut facilement rendre votre site Web plus efficace. Dans le même temps, je vous recommande également d'étudier sous-plan.js, qui fournit un grand nombre de fonctions très utiles.