La limitation de la fonction, tout simplement, rend une fonction incapable d'être appelée continuellement dans un intervalle de temps très court. Ce n'est que lorsque la dernière fonction a été exécutée après l'intervalle de temps spécifié par vous, le prochain appel à la fonction.
Le principe de la limitation de la fonction est assez simple. Je suppose que tout le monde y a pensé, c'est la minuterie. Lorsque je déclenche une heure, d'abord Settit pour retarder l'événement pendant un certain temps avant l'exécution. Si l'événement est à nouveau déclenché dans cet intervalle de temps, nous effacons le minuteur d'origine, puis définissons un nouveau minuteur pour retarder l'exécution pendant un certain temps, c'est tout.
Dans les scénarios suivants, les scénarios suivants effectuent souvent des comportements lourds tels que les opérations DOM et le chargement des ressources, ce qui fait que l'interface utilisateur s'arrête ou même les accidents du navigateur.
1. Redimensionner et faire défiler les événements de l'objet de fenêtre
2. Événement MouseMove lors de la traînée
3. Événements Mousedown et Keydown dans les jeux de tir
4. Événements Keyup qui sont automatiquement terminés par entrée de texte
En fait, pour l'événement de redimensionnement de la fenêtre, l'exigence réelle consiste à arrêter de modifier la taille n millisecondes et à effectuer un traitement ultérieur; tandis que la plupart des autres événements nécessitent un traitement ultérieur à une certaine fréquence. Il y a deux solutions à ces deux besoins, déboucher et gaz.
L'accélération et le débouchement sont deux solutions pour résoudre le problème de la demande et de l'inadéquation de la vitesse de réponse. La différence entre les deux réside dans le choix de différentes stratégies.
Exécutez des fonctions à des intervalles tels que l'accélérateur.
Si l'événement est à nouveau déclenché dans l'intervalle de débouchement t, le minuteur sera re-chronométré jusqu'à ce que le temps d'arrêt soit supérieur ou égal à t.
1. Implémentation simple de la fonction de papillon
Fonction Affaire (FN, Threshhold, Scope) {Threshhold || (HERSHORD = 250); var dernier, minuterie; return function () {var context = scope || ce; var now = + new Date (), args = arguments; if (last && maintenant - dernier + threresh holding <0) {// conservez-le ClearTimeout (Defertimer); timer = setTimeOut (function () {Last = Now; fn.Apply (context, args);}, threshhold); } else {Last = Now; fn.Apply (contexte, args); }};}Méthodes d'appel
$ ('body'). sur ('MouseMove', Throttle (fonction (événement) {console.log ('tick');}, 1000));2. Implémentation simple de la fonction de débouchement
fonction Debounce (fn, delay) {var timer = null; return function () {var context = this, args = arguments; ClearTimeout (temporisateur); timer = setTimeout (function () {fn.Apply (contexte, args);}, delay); };}Méthodes d'appel
$ ('input.username'). Keypress (Debounce (fonction (événement) {// fait la demande AJAX}, 250));3. Implémentation de l'emballage simple
/ ** * Throttle * @param fn, attendre, déboucher * / var throttle = fonction (fn, attendre, déboucher) {var timer = null, // timer t_last = null, // dernier set, // context args, // paramètre difff; // Return de différence de temps Funciton () {var curr = + new Date (); var context = this, args = arguments; ClearTimeout (temporisateur); if (Debounce) {// Si il est de dénobli Timer = setTimeout (function () {fn.apply (context, args);}, attendre); } else {// Si elle est de l'accélérateur if (! t_last) t_last = curr; if (curr - t_last> = attendre) {fn.Apply (contexte, attendre); context = wait = null; }}}} / ** * Debounce * @param fn, attendre * / var Debounce = function (fn, attendre) {return throttle (fn, attendre, true);}Résumé: Ces deux méthodes conviennent à certains événements qui seront déclenchés à plusieurs reprises, tels que: Mousemove, Keydown, Keyup, Keypress, défilement, etc.
Si vous ne liez que les événements natifs et ne les contrôlez pas, le navigateur sera bégayé et l'expérience utilisateur sera médiocre. Afin d'améliorer les performances JS, il est recommandé d'utiliser la limitation de la fonction ou la fonction de débouchement pour contrôler lors de l'utilisation des événements ci-dessus et similaires.
4. Analyse du code source lié au soulignement v1.7.0
1. _.
_.throttle = fonction (func, attente, options) {var context, args, result; var timeout = null; // TIMER VAR PRÉ-PREMERS = 0; // Time Dernière déclenchée if (! Options) Options = {}; var ultérieurement = function () {PREMER = OPTIONS.LEADING === FAUX? 0: _.Now (); timeout = null; résultat = func.Apply (contexte, args); if (! timeout) context = args = null; }; return function () {var now = _.now (); // s'il faut exécuter if (! Options précédentes && options.Leading === false) Précédent = maintenant; // Voici un concept de rester: combien de temps est le temps pour exécuter l'événement var restant = attendre - (maintenant - précédent); Context = this; args = arguments; // Rester <= 0 étant donné que l'événement est retenu après l'arrêt de l'événement ou // lorsque l'attente est exactement différente, l'événement sera déclenché immédiatement // reste> l'attente ne prend pas en compte le scénario correspondant // parce que maintenant est plus positif et n'est pas estimé qu'il est sûr, et cette situation sera également en cours d'exécution (il est estimé que c'est le cas || restant> attendre) {if (timeout) {cleartimeout (timeout); timeout = null; } précédent = maintenant; résultat = func.Apply (contexte, args); if (! timeout) context = args = null; // s'il faut suivre} else if (! Timeout && options.trailing! == false) {timeout = setTimeout (plus tard, restant); } Retour Résultat; };};Comme on peut le voir à partir de ce qui précède, le soulignement a considéré plus de situations: options.Leading:
La première fois est exécuté, la valeur par défaut est vraie, ce qui signifie que la première fois sera exécuté. La première fois les options d'exécution. La dernière fois est passé {traîne: false} signifie que la dernière fois n'est pas exécuté. La soi-disant première fois est de savoir si l'événement est exécuté en premier. Lorsque l'événement vient de commencer, si l'événement doit être déclenché en premier. Si vous le souhaitez, précédent = 0, et restant est négatif, la dite la dernière fois si la fonction est exécutée, est immédiatement appelée une fois l'événement terminé. Cette méthode est déclenchée la dernière fois. Si vous souhaitez exécuter, une minuterie est définie, c'est-à-dire qu'elle doit être exécutée une fois une fois l'événement terminé. REMINIMING> WAIT signifie que le temps du client a été modifié.
2. _.Debounce Fonction
_.debounce = fonction (func, wait, immédiat) {// par défaut immédiat est un faux délai d'expiration, args, contexte, horodatage, résultat; var ultérieurement = function () {// Lorsque la fonction renvoyée par _.debounce est appelée plusieurs fois pendant l'intervalle de temps spécifié par attente, la valeur de l'horodatage sera mise à jour, ce qui entraîne la dernière exécution de retard de retard if (Last <wait && last> = 0) {timeout = setTimeout (plus tard, wait - dernier); } else {timeout = null; if (! immédiat) {result = func.Apply (contexte, args); if (! timeout) context = args = null; }}}; return function () {context = this; args = arguments; TimeStamp = _.Now (); // Lorsque la méthode est appelée la première fois et immédiatement après l'intervalle de temps spécifié par attente, le temporisateur est démarré pour appeler la fonction func si (! Timeout) timeout = setTimeout (plus tard, attendre); if (callnow) {result = func.Apply (contexte, args); context = args = null; } Retour Résultat; };};Je pense que la chose merveilleuse à propos de l'implémentation de _.Debounce est de démarrer le minuteur récursivement au lieu d'ajuster l'exécution du retard des fonctions Func en appelant ClearTimeout.
Ce qui précède est la fonction d'optimisation des performances JavaScript et la fonction de débouchement que l'éditeur vous a présenté. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!