Detaillierte Analyse der Entprellung und Drosselung von JS-Funktionen_Grundkenntnisse

Dieser Artikel stellt hauptsächlich die detaillierte Analyse des Wissens über die Entprellung und Drosselung von JS-Funktionen sowie die JS-Codeanalyse vor. Freunde, die sich für JS interessieren, sollten ihn als Referenz lesen.

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 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 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 Ereignisverarbeitungsmethode reduzieren und dadurch den entsprechenden Verarbeitungsaufwand reduzieren.

Entschütteln. Ich bin wahrscheinlich zum ersten Mal mit diesem Begriff in Berührung gekommen, als ich in der Physik war. Manchmal kann es passieren, dass der Schalter wackelt, bevor er tatsächlich geschlossen wird . Es wird problematisch sein, 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
    }
   }
  }

Mal sehen, wie man anruft:

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

Wenn f zu diesem Zeitpunkt verrückt durch die Seite scrollt, werden Sie feststellen, dass in 400 ms eine 123 gedruckt wird. Wenn keine Drosselung erfolgt, wird der Vorgang fortgesetzt zum Drucken. Sie können den Warteparameter ändern.

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 dies beurteilt Das Intervall zwischen dem ersten Die Triggerzeit und die letzte Ausführungszeit bestimmen, ob der Rückruf ausgeführt werden soll. Dies führt dazu, dass der letzte Trigger 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, sodass die Methode ausgeführt werden muss 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
   }
  }

Nennen Sie es zu diesem Zeitpunkt auf die gleiche Weise wie zuvor. Sie werden feststellen, dass es egal ist, wie verrückt Sie scrollen Das Fenster stoppt nur das Scrollen. Das entsprechende Ereignis wird ausgeführt.

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: Legen Sie eine Intervallzeit fest, z. B. 50 Millisekunden, und stellen Sie den Timer basierend auf dieser Zeit ein und das Ereignis wird zum zweiten Mal ausgelöst. Wenn das Intervall weniger als 50 Millisekunden beträgt, 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); 
}

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

方法二

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事件循环机制示例分析

JS如何测试目标网站的打开响应速度

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