Une brève discussion sur les connaissances de base de la fonction JavaScript throttling

Une brève discussion sur les connaissances de base de la fonction JavaScript throttling_Basic

WBOY

Libérer： 2016-05-16 16:28:09

original

1475 Les gens l'ont consulté

Certains calculs et traitements dans le navigateur sont beaucoup plus coûteux que d'autres. Par exemple, les opérations DOM nécessitent plus de mémoire et de temps CPU que les interactions non-DOM. Tenter d'effectuer successivement trop d'opérations liées au DOM peut entraîner le blocage du navigateur et parfois même un crash. Cela est particulièrement susceptible de se produire lors de l'utilisation du 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 dans le gestionnaire d'événements onresize, sa fréquence élevée de modifications peut faire planter le navigateur.
L’idée de base derrière la limitation des fonctions est que certains codes ne peuvent pas être exécutés de manière continue et répétée sans interruption. La première fois que la fonction est appelée, un minuteur est créé pour exécuter le code après un intervalle spécifié. Lorsque cette fonction est appelée une deuxième fois, elle efface la minuterie précédente et en définit une autre. Si le timer précédent a déjà été exécuté, cette opération n'a aucun sens. Cependant, si le timer précédent n’a pas encore été exécuté, il est remplacé par un nouveau timer. Le but est d'exécuter la fonction uniquement après que la demande d'exécution ait été arrêtée pendant un certain temps.

Copier le code Le code est le suivant :

fonction throttle (méthode, contexte){

Cleartimeout (Method.tid); 

                    method.tId = setTimeout ( function () {

method.call (contexte);

, , , , 100);
          }

Exemples d'application :
Supposons qu'il existe un élément

qui doit garder sa hauteur égale à sa largeur. Il peut être codé comme suit :

Copier le code Le code est le suivant :

fonction resizeDiv(){

              var div = document.getElementById("mydiv");

              div.style.height = div.offsetWidth "px";

            }

              window.onresize = function(){

Accélérateur(resizeDiv);

            }

Ici, la fonctionnalité de redimensionnement est placée dans une fonction distincte appelée resizeDiv, puis le gestionnaire d'événements onresize appelle throttle() et transmet la fonction resizeDiv au lieu d'appeler directement resizeDiv(). Dans la plupart des cas, les utilisateurs ne ressentiront pas le changement, même si le calcul enregistré dans le navigateur peut être très volumineux.