Dieser Artikel beschreibt das Konzept und die Verwendung der JavaScript -Funktion. Teilen Sie es für Ihre Referenz wie folgt weiter:
Kürzlich, als ich Webseiten machte, hatte ich eine Anforderung, einige Seitenelementgrößen zu ändern, wenn sich das Browserfenster änderte, so dass ich natürlich an das Ereignis des Fensters der Größe des Fensters nachgedacht habe, also schrieb ich dies
<! DocType html> <html> <kopf> <title> drosseltell </title> </head> <body> <script type = "text/javaScript"> n = 0; Funktion resizeHandler () {console.log (neues Datum (). GetTime ()); console.log (++ n); } window.onResize = resizeHandler; </script> </body> </html>Die Funktion ist implementiert, aber wenn ich die Art und Weise, wie ich die Browserfenstergröße ändere
Das ist richtig, eine einfache Drag -and -Drop -Methode hat meine Größe von My ResizeHandler () 52 Mal ausgeführt, was überhaupt nicht der Effekt ist, den ich überhaupt möchte. Tatsächlich ist der Code meiner My -ReizeHandler () -Methode sehr kompliziert, und ich verwende sogar AJAX, um Anforderungen an den Server zu senden. Wenn ich einfach die Fenstergröße jeweils ändere, muss ich 52 Mal anrufen. Das ist eine große Sache.
Funktionsdrossung
Tatsächlich ist es meine ursprüngliche Absicht, nach der Größe des Fensters einige Anpassungen an der Seite vorzunehmen. Das Größe des Fensters wird nach dem Ende der Größenänderung nicht ausgelöst. Ich kenne die spezifische Frequenz nicht, aber sie ruft ständig auf, bis sich die Fenstergröße nicht ändert. Tatsächlich werden ähnliche Mechanismen und Mousemove in kurzer Zeit wiederholt ausgelöst.
Es gibt Funktionen, die sich speziell mit diesem Problem in der erweiterten JavaScript -Programmierung befassen
Funktion throttle (Methode, Kontext) {ClearTimeout (methode.tid); method.tid = setTimeout (function () {method.call (context);}, 500);}Das Prinzip ist sehr einfach. Verwenden Sie einen Timer, um die Ausführung der Funktion um 500 Millisekunden zu verzögern. Wenn eine Funktion innerhalb von 500 Millisekunden erneut aufgerufen wird, wird der letzte Anruf gelöscht. Diesmal wird der Anruf nach 500 Millisekunden ausgeführt, und dies wird wiederholt. Auf diese Weise kann mein Code gerade jetzt geändert werden
<script type = "text/javaScript"> n = 0; Funktion resizeHandler () {console.log (new Date (). GetTime ()); console.log (++ n);} Funktion throttle (Methode, Kontext) {ClearTimeout (methode.tid); method.tid = setTimeout (function () {method.call (context);}, 500);} window.onResize = function () {throttle (ReiseHandler, Fenster);}; </script>Versuchen Sie zu ziehen und zu ziehen, es wurde nur einmal ausgeführt
Eine andere Möglichkeit, es zu tun
Es gibt auch eine Funktionsdrosselungslösung online, die dies tut
Funktionsdrossel (Methode, Verzögerung) {var timer = null; return function () {var context = this, args = argumente; Clearimeout (Timer); Timer = setTimeout (function () {method.apply (Kontext, args);}, delay); }}Versuchen Sie es mit dem gleichen Effekt anzurufen
<script type = "text/javaScript"> n = 0; Funktion resizeHandler () {console.log (new Date (). GetTime ()); console.log (++ n);} Funktion throttle (Methode, Verzögerung) {var timer = null; return function () {var context = this, args = argumente; Clearimeout (Timer); Timer = setTimeout (function () {method.apply (Kontext, args);}, delay); }} window.onResize = throttle (resizeHandler, 500); // Da das Funktionshandle zurückgegeben wird, müssen die Funktion </script> nicht wickeln.Vergleichen
Beide Methoden verwenden SetTimeout. Der Unterschied besteht darin, dass die durch die zweite Methode hinzugefügte Funktion die Ausführungszeit verzögert. Dies ist einfach, diese Funktion in der ersten Lösung zu haben und einen Parameter hinzuzufügen.
Die erste Option setzt TID jedoch als Variable der Funktion zum Speichern fest, während die zweite Option einen Verschluss zum Speichern erzeugt. Ich persönlich denke, dass die Lücke nicht groß ist, und ich mag den ersten, was einfach und effizient ist.
Neue Nachfrage
Eines Tages habe ich etwas Ähnliches gemacht, genau wie die automatische Eingabeaufforderung für Eingaben auf der Baidu -Homepage. Ich habe das KeyUp -Ereignis auf dem Text gebunden. Es fordert automatisch jedes Mal auf, wenn die Tastatur auftaucht, aber ich möchte nicht so oft auffordern. Also habe ich die obige Methode verwendet, aber es war tragisch. Ich stoppte nur die Eingaben und wartete auf eine Eingabe von 500 Millisekunden, und während des Eingangsprozesses gab es überhaupt keine Eingabeaufforderung. Ich schaute mir den Code an und stellte fest, dass er nicht wahr war. Solange der Benutzer blind eingeben würde, drücken Sie die Tastatur innerhalb von 500 Millisekunden, die Eingabeaufforderungsfunktion würde kontinuierlich verzögert. Dies würde erst auffordern, wenn ich aufhörte, was bedeutungslos wäre.
Kann es einmal zu einer festen Zeit auf der Grundlage von Funktionsdrosseln ausgeführt werden?
Kleine Änderungen
Ich habe online gesucht und wir können einige Änderungen basierend auf der zweiten Schreibmethode vornehmen (die erste ist etwas schlecht, um mehrere Variablen für Funktionen zu erweitern) und einen Parameter hinzuzufügen, wenn das feste Intervall ausgeführt werden muss.
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 werden wir bestimmen, wie lange das Intervall dauert. Wenn die Einstellzeit überschritten wird, werden wir sie sofort ausführen. Verwenden Sie das Beispiel gerade jetzt, um den Effekt auszuprobieren
window.onResize = throttle (resizeHandler, 100.200);
Es ist wahr, dass es keine häufige Ausführung oder endgültige Ausführung gibt
Weitere Informationen zu javaScriptbezogenen Inhalten finden Sie in den Themen dieser Website: "Zusammenfassung der JavaScript -Switching -Effekte und -Techniken", "Zusammenfassung der Fähigkeiten der JavaScript -Suchalgorithmus", "Zusammenfassung der JavaScript -Animationseffekte und -Techniken", "Zusammenfassung von JavaScript -Fehler und Debugging -Techniken", Summary of Javacript -Daten und Algorith -Fähigkeiten "," Summary of Javacript Data Structures "," Summary of Javacript Data Structures "" "" "" "" "" "" "" "" "" " JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.