Analyse détaillée de l'anti-rebond et de la limitation de la fonction JS

1. Que sont la limitation et l'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 des méthodes qui gèrent l'événement, 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 sont à nouveau endommagés. À 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.

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
    }
   }
  }

Voyons 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 imprimé en 400 ms. S'il n'y a pas de limitation, il sera imprimé en continu. pour sentir 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 que précédemment.

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 vous arrêterez de faire défiler.

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 de mise en œuvre est facile à comprendre : définir un intervalle de temps, par exemple 50 millisecondes, et définir la minuterie en fonction de ce temps lorsque l'intervalle entre le premier événement déclencheur et le deuxième événement déclencheur est inférieur. supérieur à 50 millisecondes, effacez cette minuterie et définissez une nouvelle minuterie, 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); 
}

Il y a un problème avec cette conception : un événement qui devrait être déclenché plusieurs fois peut finir par se produire une seule fois. Plus précisément, pour un événement de défilement progressif, si l'utilisateur défile trop rapidement ou si l'intervalle de limitation de fonction défini par le programme est trop long, l'événement de défilement final apparaîtra comme un événement de saut soudain et le processus intermédiaire sera interrompu par limitation. . Cet exemple est un peu exagéré, mais si vous utilisez cette méthode pour limiter, vous finirez par avoir l'impression que le programme est "plus brusque" que lorsqu'il n'est pas limité, ce qui est très mauvais pour l'expérience utilisateur. Il existe une idée de conception pour combler cette lacune.

Méthode 2

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函数去抖和节流详解，希望能帮助到大家。

相关推荐：

JavaScript 函数节流详解及方法实例详解

Java字节流与基本数据类型的转换实例详解

详解JavaScript函数节流

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!