Einige Berechnungen und Verarbeitung im Browser sind viel teurer als andere. Beispielsweise erfordern DOM-Operationen mehr Speicher- und CPU-Zeit als Nicht-DOM-Wechselwirkungen. Der Versuch, zu viele DOM-bezogene Operationen in Folge durchzuführen, kann dazu führen, dass der Browser hängt und manchmal sogar abstürzt. Dies ist besonders bei der Verwendung des Onresize -Ereignishandlers im IE leicht zu erfolgen. Wenn der Browser geändert wird, wird das Ereignis kontinuierlich ausgelöst. Wenn Sie versuchen, DOM -Operationen innerhalb des Onresize -Ereignishandlers durchzuführen, können die hochfrequenten Änderungen den Browser abbrechen.
Die Grundidee hinter der Funktionsdrossung ist, dass bestimmter Code nicht ohne Unterbrechung wiederholt ausgeführt werden kann. Das erste Mal, dass die Funktion aufgerufen wird, wird ein Timer erstellt und der Code wird nach dem angegebenen Zeitintervall ausgeführt. Wenn die Funktion als zweiter Timer bezeichnet wird, löscht sie den vorherigen Timer und legt einen weiteren fest. Wenn der vorherige Timer ausgeführt wurde, hat diese Operation keine Bedeutung. Wenn der vorherige Timer jedoch nicht ausgeführt wurde, wird er tatsächlich durch einen neuen Timer ersetzt. Ziel ist es, erst nach der Anfrage zur Ausführung der Funktion für einen bestimmten Zeitraum gestoppt zu werden.
Funktion throttle (Methode, Kontext) {ClearTimeout (methode.tid); method.tid = setTimeout (function () {method.call (context);}, 100); }Anwendungsbeispiel:
Unter der Annahme, dass es ein <div/> Element gibt, das seine Höhe immer gleich seiner Breite halten muss, kann es wie folgt codiert werden:
function resizsizingiv () {var div = document.getElementById ("myDiv"); Div.Style.Height = div.Offsetwidth + "px"; } window.onResize = function () {throttle (resizediv); }Hier wird die Größe der Größe in eine separate Funktion namens REZISIONIV eingerichtet, und der OnResize -Ereignishandler ruft Throttle () auf und passt in die hochgrenzende Funktion, anstatt direkt aufzurufen () aufzurufen. In den meisten Fällen können Benutzer die Änderung nicht spüren, obwohl die im Browser gespeicherten Berechnungen möglicherweise sehr groß sind.
Im Folgenden finden Sie die Ergänzungen anderer Internetnutzer
Heute schreiben wir hauptsächlich über die Funktion, die wir in unserer täglichen Arbeit brauchen. Einige Freunde sind sich der Funktionsdrossung vielleicht nicht bewusst. In der Arbeit erfordern viele Szenarien wir auf Throttp: //www.sub.com. Am häufigsten sind die Bildschirmgrößenreinigung und Touch -Move- oder Scroll -Ereignisse. Ich weiß nicht, ob ich die Artikel gelesen habe, die ich zuvor geschrieben habe! JQuery bestimmt die Gleitrichtung der Seite Scroll -Stange und Touchmove. Wenn Sie diese Beispiele verwenden, werden Sie feststellen, dass die Seite immer wieder Touchmove oder Scrollen auslöst, da die Seite nicht neu streng. Daher verwende ich die JavaScript -Funktion nicht, um hier zu drosseln. Wenn wir jedoch Fenster verwenden. Dies bezieht sich auf das Problem der Seite Neulackierung. In der Größe des Fensters empfehlen wir, dass Sie Funktionsdrosseln verwenden!
Einführung in die Drosselung von JavaScript -Funktionen
Wenn Sie sich von einem großen Text über mich überwältigt fühlen, spielt es keine Rolle. Ich gebe Ihnen ein kurzes Beispiel, um die Funktion hier zu veranschaulichen! Zum Beispiel, wenn wir verwenden
$ (Fenster) .Resize (function () {console.log ("Haorooms Fenster Größe");})Sie werden finden:
Es wird hier viele Male ausgegeben. Wir beschränken einfach das Fenster und es wird weiterhin auslösen!
Auf diese Weise wird die Seite, wenn div häufig verwendet wird, kontinuierlich neu gezeichnet. Wenn Sie mit einer relativ niedrigen Version auf IE stoßen, kann der Browser abstürzen! Um dies zu vermeiden, können wir die Funktionsdrossungsmethode verwenden. Die Grundidee ist: Wenn die Funktion zum ersten Mal aufgerufen wird, erstellen wir einen Timer, führen den Code nach dem angegebenen Zeitintervall aus, und wenn das zweite Mal aufgerufen wird, werden wir den vorherigen Timer eindeutig verstehen und einen zurücksetzen. Wenn der vorherige Timer ausgeführt wurde, ist diese Operation nicht beabsichtigt. Wenn der Timer nicht ausgeführt wurde, wird er durch einen neuen Timer ersetzt. Ziel ist es, die Funktion auszuführen, nachdem sie über einen bestimmten Zeitraum hinweg gestoppt wurde.
Die Objektmethode kann wie folgt geschrieben werden:
var haoroomStest = {timeoutID: null, Performprocessing: function () {console.log ("Größe"); }, prozess: function () {clearimeout (thatTimeoutId); var das = dies; this.timeoutid = setTimeout (function () {that.performprocessing ();}, 500)}}Danach verwenden wir:
$ (Fenster) .Resize (function () {haoomstest.process ();})
Dies reduziert die Anfragen, verringert DOM neu und erreibt den Zweck des Drossels!
Andere Funktionsweisen drosseln
Neben der Art und Weise, wie wir Objekte verwenden, werden auch andere Methoden und Funktionsmethoden online und in den Informationen eingeführt. Ich werde unten kurz einige vorstellen!
Funktionsmethode eins
Funktion throttle (Methode, Kontext) {ClearTimeout (methode.tid); method.tid = setTimeout (function () {method.call (context);}, 100); }Wir verwenden
Funktion ressizsizingiv () {console.log ("harooms")} $ (Fenster) .Resize (function () {throttle (resizediv)})Der gleiche Effekt wie das obige Objekt!
Funktionsmethode zwei
Es gibt auch eine beliebtere Möglichkeit, Geld online zu verbieten, also werde ich hier darüber schreiben!
Funktionsdrossel (Methode, Verzögerung) {var timer = null; return function () {var context = this, args = argumente; Clearimeout (Timer); Timer = setTimeout (function () {method.apply (Kontext, args);}, delay); }}Dann können Sie Folgendes schreiben:
Funktion resizsiziv () {console.log ("haorooms")} window.onResize = throttle (resizediv, 500);Neue Nachfrage
Wenn wir Fuzzy Search Intelligent Association -Eingabeaufforderungen durchführen, werden wir das KeyUp -Ereignis an der Eingabe binden. Aber ich möchte es nicht so oft auslösen, daher wird es Probleme mit der obigen Methode geben. Daher wird die obige Funktion wie folgt geringfügig geändert:
Funktionsdrossel (Methode, Verzögerung, Dauer) {var timer = null, begin = neues Datum (); return function () {var context = this, args = argumente, current = new Date () ;; Clearimeout (Timer); if (current-begin> = duration) {method.apply (Kontext, args); begin = Strom; } else {timer = setTimeout (function () {method.apply (context, args);}, delay); }}}Auf diese Weise ist das Auslösen nicht so häufig wie zuvor!