Detaillierte Analyse der Entprellung und Drosselung von JS-Funktionen-js-Tutorial-php.cn

1. Was sind Drosselung und Entprellung?

Drosselung. Ziehen Sie einfach den Wasserhahn fest, um den Wasserfluss zu verringern, aber der Wasserfluss wird dadurch nicht gestoppt. Stellen Sie sich vor, dass wir im wirklichen Leben manchmal einen Eimer Wasser holen müssen, während wir nicht die ganze Zeit dort stehen und warten müssen, um etwas anderes zu tun. Damit das Wasser den Eimer fast füllen kann, dürfen Sie den Wasserhahn nicht zu weit öffnen, sonst ist das Wasser voll, bevor Sie zurückkommen, und Sie werden viel Wasser verschwenden Sie müssen drosseln, damit das Wasser bei Ihrer Rückkehr fast voll ist. Gibt es eine solche Situation in JS? Ein typisches Szenario ist das verzögerte Laden von Bildern und das Überwachen des Scroll-Ereignisses der Maus. Die entsprechenden Verarbeitungsmethoden dieser Ereignisse entsprechen Wasser, da Scrollen und Mousemove wird verwendet, wenn sich die Maus bewegt. Es wird häufig vom Browser ausgelöst, was dazu führt, dass die entsprechenden Ereignisse häufig ausgelöst werden (der Wasserfluss ist zu schnell), was zu einem hohen Ressourcenaufwand des Browsers führt Eine Zwischenverarbeitung ist nicht erforderlich. Dies führt zum Einfrieren des Browsers. Wir können nicht verhindern, dass der Browser das entsprechende Ereignis auslöst, aber wir können die Ausführungshäufigkeit der Ereignisverarbeitungsmethode reduzieren und dadurch den entsprechenden Verarbeitungsaufwand verringern.

Entschütteln. Ich bin wahrscheinlich zum ersten Mal auf diesen Begriff gestoßen, als der Schalter tatsächlich geschlossen wurde. Wenn das Zittern offensichtlich ist, kann es sein, dass die Glühbirne blinkt. Es wird problematisch sein, wenn die Augen erneut blinken. Zu diesem Zeitpunkt wird eine Entprellungsschaltung angezeigt. Angenommen, eines unserer Eingabefelder fragt im Hintergrund ab, während der Benutzer gleichzeitig Inhalte eingibt, und dann häufig umgekehrt Wenn die Anfrage gestellt wird, sollten die vorherigen Anfragen redundant sein, bis die Benutzereingabe abgeschlossen ist. Unter der Annahme, dass das Netzwerk langsamer ist und die vom Hintergrund zurückgegebenen Daten langsamer sind, können sich die zugehörigen angezeigten Wörter häufig ändern, bis die letzte Anfrage zurückgegeben wird. Zu diesem Zeitpunkt können Sie überwachen, ob innerhalb eines bestimmten Zeitraums eine erneute Eingabe erfolgt. Wenn keine erneute Eingabe erfolgt, wird davon ausgegangen, dass die Eingabe abgeschlossen ist und die Anforderung gesendet wird tippt noch und die Anfrage wird nicht gesendet.

Entprellen und Drosseln sind unterschiedlich, da die Drosselung zwar die Zwischenverarbeitungsfunktionen einschränkt, aber nur die Häufigkeit verringert, während Entprellen alle Zwischenverarbeitungsfunktionen herausfiltert und nur die Regeln ausführt Das letzte Ereignis innerhalb der Bestimmungszeit.

2. JS-Implementierung.

Drosselung:

/** 实现思路：
  ** 参数需要一个执行的频率，和一个对应的处理函数,
  ** 内部需要一个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
    }
   }
  }

Nach dem Login kopieren

Mal sehen, wie man aufruft:

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

Nach dem Login kopieren

Wenn Sie zu diesem Zeitpunkt verrückt durch die Seite scrollen, werden Sie feststellen, dass eine 123 in 400 ms gedruckt wird. Wenn keine Drosselung erfolgt, wird sie kontinuierlich gedruckt den Unterschied spüren.

Aber hier ist unsere Drosselungsmethode unvollkommen, weil unsere Methode dieses Objekt nicht erhält, wenn das Ereignis auftritt, und weil unsere Methode einfach und grob ist, indem sie die Zeit und das Datum dieses Auslösers beurteilt Die Zeiten werden verwendet, um zu bestimmen, ob der Rückruf ausgeführt werden soll. Dies führt dazu, dass der letzte Auslöser nicht ausgeführt werden kann oder das Abfahrtsintervall des Benutzers tatsächlich sehr kurz ist und nicht ausgeführt werden kann, was zu einem Totschlag führt. Daher muss die Methode verbessert werden.

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

Nach dem Login kopieren

Auf diese Weise ist unsere Methode relativ vollständig und die aufrufende Methode ist dieselbe wie zuvor.

Entprellung:

Die Entprellungsmethode entspricht der Drosselung, wird jedoch erst ausgeführt, nachdem festgestellt wurde, dass der Jitter vorüber ist.

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

Nach dem Login kopieren

Zu diesem Zeitpunkt rufen Sie es auf die gleiche Weise wie zuvor auf. Sie werden feststellen, dass das entsprechende Ereignis egal ist, wie verrückt Sie sind wird erst ausgeführt, wenn Sie mit dem Scrollen aufhören.

Debounce und Throttling wurden von vielen ausgereiften Js implementiert, und die allgemeine Idee ist im Grunde diese.

Lassen Sie uns den Code der Implementierungsmethode von Netizen mit Ihnen teilen:

Methode 1

1 Die Idee dieser Implementierungsmethode ist leicht zu verstehen: Stellen Sie eine Intervallzeit ein, beispielsweise 50 Millisekunden, und stellen Sie den Timer basierend auf dieser Zeit ein als 50 Millisekunden, löschen Sie diesen Timer und stellen Sie einen neuen Timer ein usw., bis innerhalb von 50 Millisekunden nach Auslösung eines Ereignisses kein wiederholter Trigger erfolgt. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Bei diesem Design gibt es ein Problem: Ein Ereignis, das mehrmals ausgelöst werden sollte, kann am Ende nur einmal auftreten. Insbesondere bei einem allmählichen Bildlaufereignis: Wenn der Benutzer zu schnell scrollt oder das vom Programm festgelegte Funktionsdrosselungsintervall zu lang ist, erscheint das letzte Bildlaufereignis als plötzliches Sprungereignis und der Zwischenprozess wird durch Drosselung unterbrochen . . Dieses Beispiel ist etwas übertrieben, aber wenn Sie diese Methode zur Drosselung verwenden, werden Sie möglicherweise das Gefühl haben, dass das Programm „abrupter“ ist als wenn es nicht gedrosselt wird, was für die Benutzererfahrung sehr schlecht ist. Es gibt eine Designidee, um dieses Manko auszugleichen.

Methode 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(); 
 } 
}

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

以上内容就是JS函数去抖和节流详解，希望能帮助到大家。