Einfach ausgedrücktes Funktionsdrosseln lässt eine Funktion nicht innerhalb eines sehr kurzen Zeitintervalls kontinuierlich aufgerufen werden. Erst wenn die letzte Funktion nach dem von dem von Ihnen angegebenen Zeitintervall ausgeführt wurde, können Sie der nächste Aufruf der Funktion getätigt werden.
Das Prinzip der Funktionsdrossung ist recht einfach. Ich denke, jeder hat daran gedacht, das ist der Timer. Wenn ich eine Zeit auslöste, wird erstmals vor der Ausführung das Ereignis für eine Weile verzögert. Wenn das Ereignis innerhalb dieses Zeitintervalls erneut ausgelöst wird, löschen wir den ursprünglichen Timer und dann einen neuen Timer, um die Ausführung für eine Weile zu verzögern.
In den folgenden Szenarien führen die folgenden Szenarien häufig starke Verhaltensweisen wie DOM -Operationen und Ressourcenbelastung durch, wodurch UI innehalten oder sogar Browserabstürze.
1. Die Größe der Größe und Scrollen Sie mit dem Fensterobjekt und scrollen Sie Ereignisse
2. Mousemove -Event während des Ziehens
3.. Mousedown- und Keydown -Ereignisse in Schießspielen
4. Taste -Ereignisse, die automatisch per Texteingabe abgeschlossen werden
In der Tat besteht die tatsächliche Anforderung für die Größe des Fensters der Größe des Fensters darin, die Größe der Größe n Millisekunden nicht mehr zu ändern und eine anschließende Verarbeitung durchzuführen. Während die meisten anderen Ereignisse eine anschließende Verarbeitung bei einer bestimmten Frequenz erfordern. Es gibt zwei Lösungen für diese beiden Bedürfnisse, entlarven und drosselt.
Drosselklaser und Downounce sind zwei Lösungen zur Lösung des Problems der Anfrage und der Reaktionsgeschwindigkeitsfehlanpassung. Der Unterschied zwischen den beiden liegt bei der Auswahl verschiedener Strategien.
Funktionen in Abständen wie Gasfunktionen ausführen.
Wenn das Ereignis innerhalb des Darfounce-Intervalls T erneut ausgelöst wird, wird der Timer erneut abgefasst, bis die Stoppzeit größer oder gleich t ist.
1. Einfache Implementierung der Drosselklappenfunktion
Funktionsdrossel (FN, Threshhold, Scope) {Threshhold || (Threshhold = 250); Var Last, Timer; return function () {var context = Scope || Das; var nun = +neues Datum (), args = Argumente; if (last && now - last + threshhold <0) {// Halten Sie sich an ClearTimeout (Defertimer) fest; timer = setTimeout (function () {last = now; fn.apply (Kontext, args);}, Threshhold); } else {last = jetzt; fn.Apply (Kontext, Args); }};}Aufrufen von Methoden
$ ('Body'). on ('Mousemove', throttle (Funktion (Ereignis) {console.log ('tick');}, 1000);2. Einfache Implementierung der Entladungsfunktion
Funktion debounce (fn, delay) {var timer = null; return function () {var context = this, args = argumente; Clearimeout (Timer); timer = setTimeout (function () {fn.apply (Kontext, args);}, delay); };}Aufrufen von Methoden
$ ('input.username'). tastePress (dunounce (function (event) {// DO die AJAX -Anforderung}, 250));3.. Einfache Verpackungsimplementierung
/** * throttle * @param fn, wait, dunounce */var throttle = function (fn, wait, dabounce) {var timer = null, // Timer t_last = null, // letztes Zeitsatz, // Kontext args, // Parameter diff; // Zeitdifferenz return funciton () {var Curr = + neues Datum (); var context = this, args = Argumente; Clearimeout (Timer); if (debounce) {// wenn es dunounce timer = setTimeout (function () {fn.apply (Kontext, args);}, Wait); } else {// wenn es drosselt, wenn (! t_last) t_last = curr; if (Curr - t_last> = wait) {fn.apply (Kontext, warte); context = wait = null; }}}}/** * dabounce * @param fn, wait */var dunounce = function (fn, wait) {return throttle (fn, wait, true);}Zusammenfassung: Diese beiden Methoden sind für einige Ereignisse geeignet, die wiederholt ausgelöst werden, wie z.
Wenn Sie nur native Ereignisse binden und sie nicht kontrollieren, wird der Browser stottert und die Benutzererfahrung ist schlecht. Um die JS -Leistung zu verbessern, wird empfohlen, Funktionsdrosseln oder Funktionen zu verwenden, um bei der Verwendung der oben genannten und ähnlichen Ereignisse zu kontrollieren.
4. Analyse des Quellcodes im Zusammenhang mit Unterstrich v1.7.0
1. _. Throttle -Funktion
_.Throttle = function (func, wait, option) {var context, args, result; var timeout = null; // Timer var vorher = 0; // Zeit zuletzt ausgelöst if (! Option) options = {}; var später = function () {vorher = optionen.leading === false? 0: _.Now (); Timeout = null; result = func.apply (Kontext, args); if (! timeout) context = args = null; }; return function () {var now = _.Now (); // ob ausführen if (! Vorher && options.leading === false) vorher = jetzt; // Hier ist ein Konzept der Verleihung: Wie lange dauert die Zeit, um das Ereignis zu führen. Kontext = dies; args = argumente; // verbleibend <= 0, wenn man bedenkt, dass das Ereignis nach dem Störden des Ereignisses wiedergegeben wird oder // Wenn das Warten genau anders ist, wird das Ereignis sofort ausgelöst // bleibt. resting> warte) {if (timeout) {clearimeout (timeout); Timeout = null; } vorher = jetzt; result = func.apply (Kontext, args); if (! timeout) context = args = null; // ob verfolgt} else if (! Timeout && options.trailing! == false) {timeout = setTimeout (später, verbleibend); } Rückgabeergebnis; };};Wie aus den oben genannten Erkenntnissen ersichtlich ist, hat Unscore mehr Situationen in Betracht gezogen: Optionen.Leading:
Das erste Mal wird ausgeführt, der Standard ist wahr, was bedeutet, dass das erste Mal ausgeführt wird. Das erste Mal Ausführungsoptionen.trailing ist deaktiviert: Das letzte Mal wird ausgeführt. Der Standard ist wahr, was bedeutet, dass das letzte Mal ausgeführt wird. Das letzte Mal wird {nachverfolgt: false} bedeutet, dass das letzte Mal nicht ausgeführt wird. Das sogenannte erste Mal ist, ob das Ereignis zuerst ausgeführt wird. Wenn das Ereignis gerade gestartet wird, sollte das Ereignis zuerst ausgelöst werden. Wenn Sie möchten, vorher ist vorgegangener = 0, und das verbleibende ist negativ, das sogenannte, letztes Mal, ob die Funktion ausgeführt wird, wird sofort aufgerufen, nachdem das Ereignis vorbei ist. Diese Methode wird das letzte Mal ausgelöst. Wenn Sie ausführen möchten, wird ein Timer festgelegt, das heißt, es muss einmal ausgeführt werden, nachdem das Ereignis vorbei ist. Remianing> Warten bedeutet, dass die Kundenzeit geändert wurde.
2. _.Debounce -Funktion
_. var später = function () {// Wenn die von _.Debounce zurückgegebene Funktion während des durch Wartezeiten angegebenen Zeitintervalls aufgerufen wird, wird der Wert des Zeitstempels kontinuierlich aktualisiert, was dazu führt, dass das letzte <wartet && last> = 0 immer wahr ist und somit ständig einen neuen Timer für Delay Execution Func var last = _ _. now () - Timestamp; if (last <wait && last> = 0) {timeout = setTimeout (später, wait - last); } else {timeout = null; if (! unmittelbar) {result = func.apply (Kontext, args); if (! timeout) context = args = null; }}}; return function () {context = this; args = argumente; timestamp = _.now (); // Wenn die Methode als erstes Mal aufgerufen wird und unmittelbar nach dem durch Wartezeit angegebenen Zeitintervall, wird der Timer begonnen, die Func -Funktion aufzurufen, wenn (! Timeout) timeout = setTimeout (später, warte); if (callnow) {result = func.apply (Kontext, args); context = args = null; } Rückgabeergebnis; };};Ich denke, das Wunderbare an der Implementierung von _.Debounce ist, den Timer rekursiv zu starten, anstatt die Verzögerung der Ausführung von Funktionen für die Aufruf von Funktionen durch ClearTimeout anzupassen.
Das obige ist die Drosselungs- und Entfernungsfunktion der JavaScript -Leistungsoptimierungsfunktion, die der Editor Ihnen vorgestellt hat. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!