Explication détaillée de la limitation et du rebond anti-tremblement de la fonction javascript

Cet article présente principalement la limitation [throttle] et l'anti-shake [debounce] des fonctions JavaScript. Il présente en détail les principes et les exemples de la limitation et de l'anti-shake. Ceux qui sont intéressés peuvent apprendre. plus. J'espère pouvoir aider tout le monde.

Anti-tremblement et limitation

Lors du redimensionnement, du défilement, de la vérification du contenu de la zone de saisie et d'autres opérations de la fenêtre, si ces fonctions de traitement des opérations sont plus complexes ou page Lorsque des opérations telles qu'un nouveau rendu fréquent sont effectuées, si la fréquence de déclenchement d'événements est illimitée, cela augmentera la charge du navigateur et conduira à une très mauvaise expérience utilisateur. À ce stade, nous pouvons utiliser l'anti-rebond (anti-tremblement) et l'accélérateur (accélérateur) pour réduire la fréquence de déclenchement sans affecter l'effet réel.

Ces deux choses apparaissent pour l'optimisation du projet. Il n'y a pas de définition officielle. Elles semblent principalement résoudre les mauvaises performances et la mémoire causées par certains événements exécutés en continu sur une courte période de temps. ;

De tels événements, tels que le défilement, le redimensionnement du déplacement de la souris, etc., sont déclenchés en continu sur une courte période de temps, ce qui consomme beaucoup d'argent en termes de performances, en particulier certaines opérations qui modifient la structure du DOM. ;

Throttle [throttle] est très similaire à l'anti-shake [debounce], qui permettent tous deux de déclencher les événements mentionnés ci-dessus combien de fois dans une période de temps spécifiée lorsque l'événement spécifié passe de continu déclenchement à une heure spécifiée

Throttle [throttle]

L'explication populaire de l'étranglement est comme lorsque nous mettons de l'eau dans le robinet, lorsque la vanne est ouverte, le l'eau coulera, ce qui confirme les belles vertus traditionnelles de diligence et d'économie, nous devons fermer le robinet, il est préférable de le faire couler goutte à goutte dans un certain intervalle de temps selon une certaine règle selon notre volonté. Ceci,, eh bien, c'est notre concept de limitation ;

En termes de fonction, utilisez la méthode setTimeout, donnée deux fois, soustrayez l'heure précédente de l'heure ultérieure et déclenchez l'événement une fois lorsque l'heure est passée. we set est atteint. C'est trop général. Regardons la fonction suivante, ici nous prenons [scroll] comme exemple

/** 样式我就顺便写了 **/
<style>
 *{padding:0;margin:0;}
 .scroll-box{
  width : 100%;
  height : 500px;
  background:blue;
  overflow : auto;
 } 
 .scroll-item{
  height:1000px;
  width:100%;
 }
</style>

-----; ----------------- --

/** 先给定DOM结构;**/
<p class="scroll-box">
 <p class="scroll-item"></p>
</p>

------------- -----------

/**主要看js,为了简单我用JQ去写了**/
<script>
 $(document).ready(function(){
  var scrollBox = $(&#39;.scroll-box&#39;);
  //调用throttle函数，传入相应的方法和规定的时间;
  var thro = throttle(throFun,300);
  //触发事件;
  scrollBox.on(&#39;scroll&#39; , function(){
   //调用执行函数;
   thro();
  })

  // 封装函数; 
  function throttle(method,time){
   var timer = null;
   var startTime = new Date();
   return function(){
    var context = this;
    var endTime = new Date();
    var resTime = endTime - startTime;
    //判断大于等于我们给的时间采取执行函数;
    if(resTime >= time){
     method.call(context);
     //执行完函数之后重置初始时间，等于最后一次触发的时间
     startTime = endTime;
    }
   }
  }
  function throFun(){
   console.log(&#39;success&#39;);
  }
 })
</script>

Grâce à la fonction ci-dessus, nous pouvons obtenir l'effet d'étranglement, en le déclenchant toutes les 300 millisecondes. le temps peut être personnalisé selon les besoins

Anti-shake[debounce]

Avant d'écrire le code, clarifions d'abord la notion d'anti-shake je me demande. si vous avez déjà fait quelque chose comme ça avec des fenêtres publicitaires flottantes des deux côtés de l'ordinateur, lorsque nous faisons glisser la barre de défilement, les fenêtres publicitaires des deux côtés essaieront constamment d'être au milieu en raison du déplacement de la barre de défilement, et alors vous verrez ces deux fenêtres trembler et trembler ;

Généralement, cela s'appelle du jitter. Ce que nous devons faire est d'empêcher ce type de gigue, qui est appelé anti-rebond ; ​​le rebond ici est qu'après avoir fini de glisser, les deux côtés La position de la fenêtre est recalculée, de sorte qu'elle apparaisse lisse et confortable à regarder, et le nombre le plus important d'opérations sur la structure DOM sera considérablement réduit

;

Optimise les performances de la page et réduit la consommation de mémoire, sinon si vous avez un navigateur plus ancien comme IE, il risque de planter pour vous

En termes écrits, la fonction ne sera exécutée qu'après la fin d'un certain événement. à la fin, nous donnons un temps de retard, puis exécutons cette fonction après le temps de retard donné. C'est la fonction anti-shake

Regardons le code :

<.>

L'idée est qu'avant que la fonction ne soit exécutée, nous effaçons d'abord le timer. Si la fonction continue de s'exécuter, elle continuera à effacer les méthodes dans le timer. La fonction ne sera pas exécutée jusqu'à notre opération. est terminé. ;

//将上面的throttle函数替换为debounce函数;
function debounce(method,time){
 var timer = null ;
 return function(){
  var context = this;
  //在函数执行的时候先清除timer定时器;
  clearTimeout(timer);
  timer = setTimeout(function(){
   method.call(context);
  },time);
 }
}

En fait, il existe de nombreuses façons d'écrire, et le principal problème est l'idée. Plus vous écrivez, plus vous comprendrez

Objectif

<.>

Lorsque nous effectuons une vérification de demande en arrière-plan, nous pouvons utiliser la fonction anti-shake. Sinon, nous demanderons une fois à chaque fois que nous appuyons sur le clavier. Les demandes sont trop fréquentes. demandera à nouveau lorsque nous aurons fini d'appuyer sur le clavier. Les demandes seront beaucoup moins nombreuses et les performances seront naturelles

1. Lors du redimensionnement de la fenêtre, nous pouvons utiliser l'anti-shake. technologie ou limitation ;

2. événement de mouvement de la souris mousemove Nous pouvons utiliser soit l'anti-shake, soit la limitation

3. événement de défilement déclenché par la barre de défilement, bien sûr, vous pouvez utiliser soit l'anti-shake, soit la limitation ;

4. Les événements continus à haute fréquence peuvent être résolus de ces deux manières pour optimiser les performances de la page ;

   Recommandations associées :

5. Explication détaillée des exemples de limitation et d'anti-secousse de la fonction JS

Explication détaillée de la limitation et de l'anti-secousse de fonctions javascript

La signification de la limitation des fonctions et de l'anti-shake

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!