Methoden zur Verhinderung hochfrequenter Auslösung und hochfrequenter Aufrufe von Ereignisfunktionen in JavaScript_Javascript-Kenntnissen

Die grundlegendste Funktion von JavaScript in Webseiten besteht darin, Benutzeraktionen zu überwachen oder darauf zu reagieren, was sehr nützlich ist. Einige Aktionen des Benutzers sind sehr häufig, andere sehr selten. Einige Listener-Funktionen werden blitzschnell ausgeführt, während andere schwerfällig sind und den Browser kaputt machen können. Nehmen Sie als Beispiel das Größenänderungsereignis des Browserfensters. Dieses Ereignis wird bei jeder Skalierungsänderung des Browserfensters einmal ausgelöst. Wenn der Listener groß ist, wird Ihr Browser bald überlastet.

Natürlich können wir nicht zulassen, dass der Browser heruntergefahren wird, aber wir können den Lösch-Listener nicht löschen. Wir können jedoch die Häufigkeit von Funktionsaufrufen begrenzen und die Auswirkungen der Ausführung von Ereignisfunktionen abschwächen. Anstatt die Listener-Funktion bei jeder Größenänderung des Fensters einmal auszulösen, können wir jetzt das Mindestintervall zum Auslösen der Listener-Funktion auf mehr als eine bestimmte Anzahl von Millisekunden festlegen, sodass ein angemessener Aufrufkanal aufrechterhalten und sichergestellt wird, dass der Benutzer Erfahrung wird nicht zerstört. Es gibt eine gute js-Tool-Bibliothek namens Underscore.js, die über eine einfache Methode verfügt, mit der Sie ganz einfach Listener erstellen können, die die Häufigkeit von Ereignisfunktionsauslösern reduzieren.

JavaScript-Code

Der Code des Frequenzreduktions-Listeners ist sehr einfach:

Code kopieren Der Code lautet wie folgt:

//Listener erstellen
var updateLayout = _.debounce(function(e) {

// Führt hier die gesamte Layoutaktualisierung durch

}, 500); // Mindestens alle 500 Millisekunden ausführen

// Fügen Sie den Ereignis-Listener hinzu
window.addEventListener("resize", updateLayout, false);
...Die unterste Ebene dieses Underscore.js-Codes verwendet tatsächlich Intervalle, um die Häufigkeit von Ereignisfunktionsaufrufen zu überprüfen:

// Gibt eine Funktion zurück, die nicht ausgeführt wird, solange sie weiterhin aufgerufen wird
// ausgelöst werden. Die Funktion wird aufgerufen, nachdem sie nicht mehr aufgerufen wird // N Millisekunden. Wenn „sofort“ übergeben wird, lösen Sie die Funktion auf dem
aus // Vorderkante statt Hinterkante.
_.debounce = function(func, warte, sofort) {
var timeout;
return function() {
var context = this, args = arguments;
var später = function() {
timeout = null;
If (!immediate) func.apply(context, args);
};
var callNow = sofort && !timeout;
clearTimeout(timeout);
timeout = setTimeout(später, warten);
if (callNow) func.apply(context, args);
};
};

Der Code ist nicht besonders kompliziert, aber es ist ein Segen, ihn nicht selbst schreiben zu müssen. Diese Debounce-Funktion ist nicht von anderen Underscore.js-Funktionen abhängig, sodass Sie diese Methode ganz einfach zu Ihrer bevorzugten js-Tool-Bibliothek wie jQuery oder MooTools hinzufügen können:

Code kopieren Der Code lautet wie folgt:

// MooTools
Function.implement({
Entprellen: Funktion(warten, sofort) {
var-Timeout,
       func = this;
return function() {
var context = this, args = arguments;
var später = function() {
Timeout = null;
If (!immediate) func.apply(context, args);
};
var callNow = sofort && !timeout;
ClearTimeout(timeout);
Timeout = setTimeout(später, warten);
If (callNow) func.apply(context, args);
};
}
});
// Benutze es!

window.addEvent("resize", myFn.debounce(500));

Wie oben erwähnt, ist das Größenänderungsereignis des Fensters der häufigste Ort, an dem der Vorgang zur Häufigkeitsreduzierung verwendet wird. Ein weiterer häufiger Ort besteht darin, automatische Vervollständigungsaufforderungen basierend auf der Tasteneingabe des Benutzers zu geben. Ich liebe es, solche Codeschnipsel zu sammeln, mit denen Sie Ihre Website ganz einfach effizienter machen können. Es wird außerdem empfohlen, Underscore.js zu studieren, das eine Vielzahl sehr nützlicher Funktionen bietet.