Ausführliche Erläuterung der JavaScript-Funktionsdrosselung und ausführliche Erläuterung von Methodenbeispielen

Dieser Artikel stellt hauptsächlich JavaScriptausführliche Erklärung der Funktionsdrosselung und zugehörige Informationen mit Beispielen vor. Freunde in Not können auf

Ausführliche Erklärung der JavaScript-Funktionsdrosselung

Es gibt nur einen UI-Thread für eine Webseite im Browser. Er kümmert sich auch um das Rendern der Schnittstelle und die Ausführung des JavaScript-Codes auf der Seite (kurz gesagt, der Browser oder die JavaScript-Ausführungsumgebung). nicht Single-Threaded, wie z. B. asynchroner Ajax-Rückruf. Die native Kommunikation, die Ereigniswarteschlange, der CSS-Laufthread usw. des Hybrid-Frameworks sind alles Multithread-Umgebungen, aber ES6 hat die Promise-Klasse eingeführt, um einige asynchrone Situationen zu reduzieren. Wenn daher JavaScript-Code eine Methode ausführt, die viele Berechnungen erfordert, blockiert er möglicherweise den UI-Thread, was dazu führen kann, dass die Antwort des Benutzers einfriert. In schwerwiegenden Fällen fragt der Browser, ob die Seite nicht reagiert und ob dies erzwungen werden soll schließen. Zum Beispiel Seiten-Scroll-Ereignisse von Webseiten, Schiebe- und Zoom-Ereignisse von Mobilgeräten usw. Auch wenn keine ernsthaften Leistungsprobleme vorliegen, sollten wir aus Sicht der

Leistungsoptimierung die umfangreiche Verarbeitungszeit entlasten, die in kurzer Zeit mehrmals ausgelöst wird.

Wie effektiv verhindert werden kann, dass der UI-Thread zu langen Code ausführt, ist ein Problem, das alle benutzerinteraktiven Anwendungen berücksichtigen müssen. Das gleiche Problem kann mithilfe des UI-Hauptthreads auf dem Client gelöst werden

Android Threads zur Verteilung der Berechnungen. Dementsprechend kann js auch Berechnungen durch die Einführung von webWorker verteilen, aber es gibt eine einfachere und effektivere Methode in js: Funktionsdrosselung. Die Kerntechnik der Verwendung der Funktion zum Drosseln besteht darin, den Timer zu verwenden, um segmentierte Berechnungen durchzuführen. Es gibt grob zwei Ideen für spezifische Implementierungsmethoden.

·Methode 1

1. Die Idee dieser Implementierungsmethode ist leicht zu verstehen: Legen Sie ein Intervall fest, z 50 Millisekunden, bis Diese Zeit wird als Basis zum Einstellen des Timers verwendet. 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 Timer ein usw., bis 50 Millisekunden, nachdem ein Ereignis ausgelöst wurde. Innerhalb von Millisekunden gibt es keine erneuten Auslöser. Der Code lautet wie folgt:

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

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 Die Idee der zweiten Implementierungsmethode unterscheidet sich geringfügig von der ersten: Legen Sie ein Intervall fest, z. B. 50 Millisekunden. Diese Zeit wird als Grundlage für die stabile Trennung von Ereignisauslösesituationen verwendet. Das heißt, wenn mehrere Ereignisse innerhalb von 100 Millisekunden kontinuierlich ausgelöst werden, werden sie nur alle 50 Millisekunden stabil und getrennt ausgeführt. Der Code lautet wie folgt:

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

Im Vergleich zur ersten Methode wird die zweite Methode möglicherweise häufiger ausgeführt als die erste Methode (manchmal bedeutet dies, dass mehr Anforderungen an den Hintergrund gesendet werden, d. h. mehr Verkehr). Aber es behebt die Mängel der ersten Methode, um den Zwischenprozess zu klären. Daher sollte man in bestimmten Szenarien je nach Situation entscheiden, welche Methode verwendet werden soll.

Für Methode zwei bieten wir eine andere Möglichkeit, dieselbe Funktion zu schreiben:

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

Lassen Sie uns abschließend über den Namen der Funktionsdrosselung sprechen. Jeder wird oft zwei Methoden sehen Namen: Throttle und Debounce können mit „Control, Stuck“ übersetzt werden, und Debounce kann mit „Anti-Bounce“ übersetzt werden. In „JavaScript Advanced Programming“ führte der Autor die erste Methode ein und verwendete den Funktionsnamen „Throttle“. Im Buch „Third-Party JavaScript Programming“ erscheinen sowohl Methode eins als auch Methode zwei. Der Autor nennt Methode eins „Debounce“ und Methode zwei „Throttle“. Bei der gleichzeitigen Einführung zweier Methoden wird in einigen Artikeln in China Methode eins fälschlicherweise als „Throttle“ und Methode zwei als „Debounce“ bezeichnet, was aus englischer Sicht sehr unverantwortlich ist. Hier bringen wir es also in Ordnung: Methode eins kann als „Anti-Bounce“ verstanden werden und sollte „Debounce“ genannt werden; Methode zwei kann als „Funktionsdrosselung“ verstanden werden und sollte „Throttle“ genannt werden.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der JavaScript-Funktionsdrosselung und ausführliche Erläuterung von Methodenbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!