Eine kurze Diskussion zur Drosselung der JavaScript-Funktion

Eine kurze Diskussion zur Drosselung der JavaScript-Funktion_Grundkenntnisse

WBOY

Freigeben： 2016-05-16 16:28:09

Original

1423 Leute haben es durchsucht

Manche Berechnungen und Verarbeitungen im Browser sind deutlich aufwendiger als andere. Beispielsweise erfordern DOM-Vorgänge mehr Speicher und CPU-Zeit als Nicht-DOM-Interaktionen. Der Versuch, zu viele DOM-bezogene Vorgänge nacheinander auszuführen, kann dazu führen, dass der Browser hängen bleibt und manchmal sogar abstürzt. Dies ist besonders wahrscheinlich, wenn der Ereignishandler onresize im IE verwendet wird. Wenn die Größe des Browsers geändert wird, wird das Ereignis kontinuierlich ausgelöst. Wenn Sie versuchen, DOM-Vorgänge innerhalb des onresize-Ereignishandlers auszuführen, kann die hohe Änderungshäufigkeit dazu führen, dass der Browser abstürzt.
Der Grundgedanke der Funktionsdrosselung besteht darin, dass bestimmter Code nicht kontinuierlich und wiederholt ohne Unterbrechung ausgeführt werden kann. Beim ersten Aufruf der Funktion wird ein Timer erstellt, um Code nach einem bestimmten Intervall auszuführen. Wenn die Funktion ein zweites Mal aufgerufen wird, löscht sie den vorherigen Timer und setzt einen anderen. Wenn der vorherige Timer bereits ausgeführt wurde, hat dieser Vorgang keine Bedeutung. Wenn der vorherige Timer jedoch noch nicht ausgeführt wurde, wird er tatsächlich durch einen neuen Timer ersetzt. Der Zweck besteht darin, die Funktion erst auszuführen, nachdem die Anforderung zur Ausführung für einige Zeit gestoppt wurde.

Code kopieren Der Code lautet wie folgt:

Funktionsdrosselung (Methode, Kontext){

Cleartimeout (Method.tid); 

                    method.tId = setTimeout ( function () {

method.call (Kontext);

          }

Anwendungsbeispiele:
Angenommen, es gibt ein

-Element, dessen Höhe gleich seiner Breite sein muss. Es kann wie folgt codiert werden:

Code kopieren Der Code lautet wie folgt:

Funktion resizeDiv(){

              var div = document.getElementById("mydiv");

              div.style.height = div.offsetWidth "px";

            }

              window.onresize = function(){

Throttle(resizeDiv);

            }

Hier wird die Größenänderungsfunktion in eine separate Funktion namens resizeDiv eingefügt, und dann ruft der Onresize-Ereignishandler Throttle() auf und übergibt die resizeDiv-Funktion, anstatt resizeDiv() direkt aufzurufen. In den meisten Fällen werden Benutzer die Änderung nicht spüren, obwohl die im Browser gespeicherte Berechnung sehr umfangreich sein kann.