Certains calculs et traitements dans le navigateur sont beaucoup plus chers que d'autres. Par exemple, les opérations DOM nécessitent plus de mémoire et de temps CPU que les interactions non-DOM. Essayer de faire trop d'opérations liées à Dom successivement peut entraîner le accrochage du navigateur et parfois même s'écraser. Ceci est facile à se produire, surtout lorsque vous utilisez le gestionnaire d'événements OnResize dans IE. Lorsque le navigateur est redimensionné, l'événement est déclenché en continu. Si vous essayez d'effectuer des opérations DOM à l'intérieur du gestionnaire d'événements OnResize, ses modifications de fréquence élevée peuvent écraser le navigateur.
L'idée de base derrière la limitation de la fonction est que certains code ne peuvent pas être exécutés à plusieurs reprises sans interruption. La première fois que la fonction est appelée, une minuterie est créée et le code est exécuté après l'intervalle de temps spécifié. Lorsque la fonction est appelée le deuxième temporisateur, il efface le minuteur précédent et en définit un autre. Si le temporisateur précédent a été exécuté, cette opération n'a aucun sens. Cependant, si le minuteur précédent n'a pas été exécuté, il est en fait remplacé par un nouveau minuteur. Le but est d'exécuter uniquement une fois que la demande d'exécution de la fonction a été arrêtée pendant un certain temps.
Fonction Throttle (méthode, contexte) {ClearTimeout (méthode.tid); Method.tid = setTimeout (function () {Method.Call (context);}, 100); }Exemple d'application:
En supposant qu'il existe un élément <div /> qui doit garder sa taille toujours égale à sa largeur, il peut être codé comme suit:
function resizediv () {var div = document.getElementById ("myDiv"); div.style.height = div.offsetwidth + "px"; } window.onresize = function () {throttle (resdizediv); }Ici, la fonction de redimensionnement est mise dans une fonction distincte appelée Resizediv, et le gestionnaire d'événements OnResize appelle Throttle () et passe dans la fonction Resizediv au lieu d'appeler ResizeIv () directement. Dans la plupart des cas, les utilisateurs ne peuvent pas ressentir le changement, bien que les calculs enregistrés au navigateur puissent être très importants.
Vous trouverez ci-dessous les ajouts d'autres internautes
Aujourd'hui, nous écrivons principalement sur la fonctionnalité de la fonction dont nous avons besoin dans notre travail quotidien. Certains amis peuvent ne pas être conscients de la limitation des fonctions. En fait, dans le travail, de nombreux scénarios nous obligent à dire que nous pourrions: //www.sub.com. Les plus courants sont le redimensionnement d'écran et les événements TouchMove ou Scroll. Je ne sais pas si j'ai lu les articles que j'ai écrits auparavant! JQuery détermine la direction coulissante de la barre de défilement de la page et de la touche. Lorsque vous utilisez ces exemples, vous constaterez que la page continue de déclencher des touches ou des défilements car il n'est pas nécessaire de repeindre la page, donc je n'utilise pas la fonction JavaScript pour accélérer ici. Cependant, lorsque nous utilisons Window.onize, l'événement de redimensionnement sera déclenché en continu! Cela sera lié au problème de repensage de la page. Par conséquent, lorsque vous redimensionnez la fenêtre, nous vous recommandons d'utiliser la limitation de la fonction!
Introduction à la limitation des fonctions JavaScript
Si vous vous sentez submergé par un grand texte sur moi, cela n'a pas d'importance. Je vais vous donner un bref exemple pour illustrer la fonction de répartition ici! Par exemple lorsque nous utilisons
$ (fenêtre) .resize (function () {console.log ("Haorooms Window Resize");})Vous trouverez:
Il sera sorti plusieurs fois ici. Nous restreinons simplement la fenêtre et il continuera de déclencher!
De cette façon, lorsque Div est souvent utilisé, la page sera redessinée en continu. Si vous rencontrez IE avec une version relativement faible, le navigateur peut s'écraser! Pour éviter cela, nous pouvons utiliser la méthode de la limitation de la fonction. L'idée de base est: lorsque la fonction est appelée pour la première fois, nous créons une minuterie, exécutons le code après l'intervalle de temps spécifié, et lorsque la deuxième fois est appelée, nous comprendrons clairement le minuteur et réinitialiser un précédent. Si le temporisateur précédent a été exécuté, cette opération n'est pas intentionnelle. Si la minuterie n'a pas été exécutée, elle sera remplacée par un nouveau minuteur. Le but est d'exécuter la fonction une fois que elle a été arrêtée pendant un certain temps.
La méthode d'objet peut être écrite comme suit:
var haoroomstest = {timeoutid: null, performProcessing: function () {console.log ("redimensit"); }, process: function () {cleartimeout (this.timeoud); var that = this; this.timeoutid = setTimeout (function () {that.performprocessing ();}, 500)}}Après cela, nous utilisons:
$ (window) .resize (function () {haoomstest.process ();})
Cela réduira les demandes, réduira le DOM redémarrer et atteindra l'objectif de la limitation!
D'autres modes de fonctionnement de la fonction
En plus de la façon dont nous utilisons des objets, d'autres méthodes et méthodes de limitation des fonctions sont également introduites en ligne et dans les informations. Je présenterai brièvement plusieurs ci-dessous!
Méthode de fonction un
Fonction Throttle (méthode, contexte) {ClearTimeout (méthode.tid); Method.tid = setTimeout (function () {Method.Call (context);}, 100); }Nous utilisons
function resizediv () {console.log ("harooms")} $ (fenêtre) .resize (function () {throttle (resizediv)})Le même effet que l'objet ci-dessus!
Méthode de fonction deux
Il existe également une façon plus populaire d'interdire l'argent en ligne, donc j'écrirai à ce sujet ici!
Fonction Throttle (méthode, retard) {var timer = null; return function () {var context = this, args = arguments; ClearTimeout (temporisateur); timer = setTimeout (function () {méthode.Apply (context, args);}, delay); }}Ensuite, vous pouvez écrire ceci:
fonction Resizediv () {console.log ("haorooms")} window.onresize = throttle (ResizeIv, 500);Nouvelle demande
Lorsque nous faisons des invites d'association intelligente Fuzzy Search, nous lierons l'événement KEYUP sur l'entrée. Mais je ne veux pas le déclencher si souvent, il y aura donc des problèmes en utilisant la méthode ci-dessus. Par conséquent, la fonction ci-dessus est légèrement modifiée, comme suit:
Fonction Accroc (méthode, retard, durée) {var timer = null, begin = new Date (); return function () {var context = this, args = arguments, current = new Date () ;; ClearTimeout (temporisateur); if (current-begin> = durée) {méthode.Apply (contexte, args); Begin = courant; } else {timer = setTimeout (function () {méthode.Apply (context, args);}, delay); }}}De cette façon, le déclenchement ne sera pas aussi fréquent qu'auparavant!