Analyse détaillée de l'anti-rebond et de la limitation des fonctions JS (tutoriel graphique)

Cet article présente principalement l'analyse détaillée des connaissances liées à l'anti-rebond et à la limitation des fonctions JS et à l'analyse du code. Les amis qui en ont besoin peuvent s'y référer.

Cet article commence par les concepts de base de la limitation et de l'anti-rebond, et effectue une analyse détaillée des fonctions JS. Examinons-les ensemble :

1. Streaming et anti-rebond ?

Limitation. Il suffit de serrer le robinet pour réduire le débit d'eau, mais cela n'arrête pas le débit d'eau. Imaginez que parfois dans la vraie vie, nous devons ramasser un seau d'eau. Tout en ramassant l'eau, nous ne voulons pas rester là à attendre tout le temps. Nous devrons peut-être partir un moment pour faire autre chose. pour que l'eau puisse presque remplir le seau. Lorsque vous revenez, vous ne pouvez pas ouvrir le robinet trop haut, sinon l'eau sera pleine avant votre retour et beaucoup d'eau sera gaspillée à ce moment-là. Il faut réduire le débit pour que l'eau soit presque pleine à votre retour. Existe-t-il donc une telle situation dans JS ? Un scénario typique est le chargement paresseux des images et la surveillance de l'événement scoll de la page, ou la surveillance de l'événement mousemove de la souris. Les méthodes de traitement correspondantes de ces événements sont équivalentes à l'eau, car scroll et. mousemove est utilisé lorsque la souris bouge. Il sera déclenché fréquemment par le navigateur, ce qui entraînera le déclenchement fréquent des événements correspondants (le débit d'eau est trop rapide), ce qui entraînera une surcharge des ressources du navigateur et beaucoup de un traitement intermédiaire n'est pas nécessaire, cela entraînera le blocage du navigateur. À ce moment-là, il est nécessaire de ralentir. Nous ne pouvons pas empêcher le navigateur de déclencher l'événement correspondant, mais nous pouvons réduire la fréquence d'exécution de la méthode de traitement des événements, réduisant ainsi la surcharge de traitement correspondante.

Dé-secouer. J'ai probablement découvert ce terme pour la première fois en physique au lycée. Parfois, l'interrupteur peut trembler avant d'être réellement fermé. Si le tremblement est évident, la petite ampoule correspondante peut clignoter. , ce sera gênant si les yeux clignotent à nouveau. À ce moment-là, un circuit anti-rebond apparaîtra. Dans notre page, cette situation se produit également. Supposons que l'une de nos zones de saisie puisse interroger les mots associés correspondants en arrière-plan lors de la saisie du contenu, si l'utilisateur saisit en même temps, des événements de saisie sont fréquemment déclenchés, puis fréquemment en arrière. la requête est émise, les requêtes précédentes doivent être redondantes jusqu'à ce que la saisie de l'utilisateur soit terminée. En supposant que le réseau est plus lent et que les données renvoyées par l'arrière-plan sont plus lentes, les mots associés affichés peuvent changer fréquemment jusqu'au retour de la dernière requête. À ce stade, vous pouvez contrôler s'il faut effectuer une nouvelle saisie dans un certain laps de temps. S'il n'y a pas de nouvelle saisie, il sera considéré que la saisie est terminée et la demande sera envoyée. Sinon, il sera jugé que l'utilisateur. est toujours en train de taper et la demande ne sera pas envoyée.

L'anti-rebond et la limitation sont différents, car bien que la limitation limite les fonctions de traitement intermédiaires, elle ne fait que réduire la fréquence, tandis que l'anti-rebond filtre toutes les fonctions de traitement intermédiaires et n'exécute les règles que le dernier événement dans le temps de détermination.

2. Implémentation JS.

J'ai déjà abordé tellement de choses. Merci de votre patience en lisant ceci. Voyons ensuite comment réaliser la limitation et l'anti-rebond.

Limitation :

/** 实现思路：
  ** 参数需要一个执行的频率，和一个对应的处理函数,
  ** 内部需要一个lastTime 变量记录上一次执行的时间
  **/
  function throttle (func, wait) {
   let lastTime = null　　　　// 为了避免每次调用lastTime都被清空，利用js的闭包返回一个function确保不生命全局变量也可以
   return function () {
    let now = new Date()
    // 如果上次执行的时间和这次触发的时间大于一个执行周期，则执行
    if (now - lastTime - wait > 0) {
     func()
     lastTime = now
    }
   }
  }

Regardez comment appeler :

// 由于闭包的存在，调用会不一样
let throttleRun = throttle(() => {
  console.log(123)
}, 400)
window.addEventListener('scroll', throttleRun)

À ce moment-là, si vous faites défiler la page de manière folle, vous constaterez qu'un 123 sera être imprimé en 400 ms, mais pas s'il est limité, il s'imprimera en continu. Vous pouvez modifier le paramètre d'attente pour ressentir la différence.

Mais ici, notre méthode de limitation est imparfaite car notre méthode n'obtient pas cet objet lorsque l'événement se produit, et parce que notre méthode est simple et grossière en jugeant l'heure et la date de ce déclencheur. times est utilisé pour déterminer s'il faut exécuter le rappel. Cela empêchera l'exécution du dernier déclencheur, ou l'intervalle de départ de l'utilisateur est en effet très court et ne peut pas être exécuté, ce qui entraînera un homicide involontaire, la méthode doit donc être améliorée.

function throttle (func, wait) {
   let lastTime = null
   let timeout
   return function () {
    let context = this
    let now = new Date()
    // 如果上次执行的时间和这次触发的时间大于一个执行周期，则执行
    if (now - lastTime - wait > 0) {
     // 如果之前有了定时任务则清除
     if (timeout) {
      clearTimeout(timeout)
      timeout = null
     }
     func.apply(context, arguments)
     lastTime = now
    } else if (!timeout) {
     timeout = setTimeout(() => {
      // 改变执行上下文环境
      func.apply(context, arguments)
     }, wait)
    }
   }
  }

De cette façon, notre méthode est relativement complète et la méthode d'appel est la même qu'avant.

Anti-rebond :

La méthode anti-rebond est cohérente avec la limitation, mais la méthode ne sera exécutée qu'une fois que la gigue sera déterminée comme étant terminée.

debounce (func, wait) {
   let lastTime = null
   let timeout
   return function () {
    let context = this
    let now = new Date()
    // 判定不是一次抖动
    if (now - lastTime - wait > 0) {
     setTimeout(() => {
      func.apply(context, arguments)
     }, wait)
    } else {
     if (timeout) {
      clearTimeout(timeout)
      timeout = null
     }
     timeout = setTimeout(() => {
      func.apply(context, arguments)
     }, wait)
    }
    // 注意这里lastTime是上次的触发时间
    lastTime = now
   }
  }

À ce moment-là, appelez-le de la même manière qu'avant. Vous constaterez que peu importe à quel point vous faites défiler la fenêtre, l'événement correspondant ne sera exécuté que lorsque le défilement s'arrêtera.

Le rebond et la limitation ont été implémentés par de nombreux js matures, et l'idée générale est essentiellement la suivante.

Partageons avec vous le code de la méthode d'implémentation des internautes :

Méthode 1

1 L'idée de​​cette méthode d'implémentation est. facile à comprendre. : définissez un intervalle de temps, par exemple 50 millisecondes, et réglez la minuterie en fonction de cette durée. Lorsque l'intervalle entre le premier événement déclencheur et le deuxième événement déclencheur est inférieur à 50 millisecondes, effacez cette minuterie et définissez-en une nouvelle. timer , et ainsi de suite, jusqu'à ce qu'il n'y ait plus de déclenchement répété dans les 50 millisecondes suivant le déclenchement d'un événement. Le code est le suivant :

function debounce(method){ 
 clearTimeout(method.timer); 
 method.timer=setTimeout(function(){ 
  method(); 
 },50); 
}

这种设计方式有一个问题：本来应该多次触发的事件，可能最终只会发生一次。具体来说，一个循序渐进的滚动事件，如果用户滚动太快速，或者程序设置的函数节流间隔时间太长，那么最终滚动事件会呈现为一个很突然的跳跃事件，中间过程都被节流截掉了。这个例子举的有点夸张了，不过使用这种方式进行节流最终是会明显感受到程序比不节流的时候“更突兀”，这对于用户体验是很差的。有一种弥补这种缺陷的设计思路。

方法二

2.第二种实现方式的思路与第一种稍有差别：设置一个间隔时间，比如50毫秒，以此时间为基准稳定分隔事件触发情况，也就是说100毫秒内连续触发多次事件，也只会按照50毫秒一次稳定分隔执行。代码如下：

var oldTime=new Date().getTime(); 
var delay=50; 
function throttle1(method){ 
 var curTime=new Date().getTime(); 
 if(curTime-oldTime>=delay){ 
  oldTime=curTime; 
  method(); 
 } 
}

相比于第一种方法，第二种方法也许会比第一种方法执行更多次（有时候意味着更多次请求后台，即更多的流量），但是却很好的解决了第一种方法清除中间过程的缺陷。因此在具体场景应根据情况择优决定使用哪种方法。

对于方法二，我们再提供另一种同样功能的写法：

var timer=undefined,delay=50; 
function throttle2(method){ 
 if(timer){ 
  return ; 
 } 
 method(); 
 timer=setTimeout(function(){ 
  timer=undefined; 
 },delay); 
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS生成指定范围随机数和随机序列方法详解

JS内加载jquery.js方法详解

JS同步、异步与延迟加载实现总结

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!