Detaillierte Analyse der Entprellung und Drosselung von JS-Funktionen (grafisches Tutorial)

Dieser Artikel stellt hauptsächlich die detaillierte Analyse des Wissens zum Entprellen und Drosseln von JS-Funktionen sowie die Codeanalyse vor. Freunde, die es benötigen, können darauf zurückgreifen.

Dieser Artikel beginnt mit den Grundkonzepten der Drosselung und Entprellung und führt eine detaillierte Analyse der JS-Funktionen durch:

1 Was ist Drosselung? Streaming und Entprellen?

Drosselung. Ziehen Sie einfach den Wasserhahn zu, um den Wasserfluss zu verringern, aber es stoppt den Fluss nicht. 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 fast voll ist, wenn Sie zurückkommen. 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 Methoden, die das Ereignis verarbeiten, 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, wenn die Augen erneut beschädigt werden. Zu diesem Zeitpunkt tritt ein Entprellungskreis auf. 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 wird gesendet 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 das letzte Ereignis innerhalb der Bestimmungszeit ausführt.

2. JS-Implementierung.

Ich habe schon so viel besprochen. Vielen Dank für Ihre Geduld beim Lesen. Schauen wir uns als Nächstes an, wie man Drosselung und Entprellung erreicht.

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

Sehen Sie sich an, wie man aufruft:

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

Wenn Sie zu diesem Zeitpunkt verrückt durch die Seite scrollen, werden Sie feststellen, dass eine 123 in 400 ms gedruckt wird , aber ohne Drosselung wird kontinuierlich gedruckt. Sie können den Warteparameter ändern, um den Unterschied zu 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)
    }
   }
  }

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

Zu diesem Zeitpunkt rufen Sie es auf die gleiche Weise wie zuvor auf. Sie werden feststellen, dass das entsprechende Ereignis nur dann ausgeführt wird, 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 teilen:

Methode 1

1. Die Idee dieser Implementierungsmethode ist leicht zu verstehen: Stellen Sie eine Intervallzeit ein, z. B. 50 Millisekunden, und stellen Sie den Timer basierend auf dieser Zeit ein. Wenn das Intervall zwischen dem ersten Triggerereignis und dem zweiten Triggerereignis weniger als 50 Millisekunden beträgt, löschen Sie diesen Timer und stellen Sie einen neuen ein Timer usw., bis innerhalb von 50 Millisekunden nach Auslösung eines Ereignisses kein wiederholter Auslöser mehr erfolgt. Der Code lautet wie folgt:

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同步、异步与延迟加载实现总结

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Entprellung und Drosselung von JS-Funktionen (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!