Clevere Verwendung von setTimeout bei der Drosselung von JS-Front-End-Funktionen

Was ist Funktionsdrosselung?

Funktionsdrosselung bedeutet einfach, dass wir nicht möchten, dass die Funktion in einem kurzen Zeitraum kontinuierlich aufgerufen wird. Wenn wir beispielsweise das Fenster vergrößern, führen wir häufig eine andere Funktion aus Betriebsfunktionen wie das Senden einer Ajax-Anfrage und andere Dinge. Wenn das Fenster gezoomt wird, ist es möglich, mehrere Anfragen kontinuierlich zu senden, was nicht das ist, was wir wollen, oder unser üblicher Mausbewegungseffekt beim Ein- und Ausschalten der Tabulatortaste, manchmal kontinuierlich und bald wird es einen Flackereffekt geben. Zu diesem Zeitpunkt können wir die Funktionsdrosselung verwenden. Wie wir alle wissen, sind DOM-Operationen sehr aufwändig oder beeinträchtigen die Leistung. Wenn beim Zoomen des Fensters viele DOM-Operationen an Elemente gebunden sind, führt dies beispielsweise zu einer großen Anzahl kontinuierlicher Berechnungen Es kommt zu DOM-Vorgängen, die die Leistung des Browsers beeinträchtigen und in schweren Fällen sogar zum Absturz des Browsers führen können. Zu diesem Zeitpunkt können wir die Funktionsdrosselung verwenden, um den Code zu optimieren~

Das Grundprinzip der Funktionsdrosselung:

Verwenden Sie beispielsweise einen Timer, um zunächst die Ausführung der Funktion zu verzögern , verwenden Sie die Funktion setTomeout(), um die Ausführung der Funktion um einen bestimmten Zeitraum zu verzögern. Wenn während dieses Zeitraums andere Ereignisse ausgelöst werden, können wir den Timer mit der Methode clearTimeout() löschen und dann einen neuen setzen Timer. Der Server verzögert die Ausführung für eine Weile.

Kürzlich war ein Team mit einem Projekt beschäftigt, das im traditionellen Modus entwickelt wurde (es beschwert sich darüber, warum es nicht viele DOM-Operationen verwendet). Die Leistung ist relativ schlecht, insbesondere wenn Sie das Fenster vergrößern und verkleinern. Manchmal passiert etwas Schreckliches, es friert ein oder sogar der Browser stürzt ab. Warum?

Da diese Seite viele DOM-Operationen enthält, wird die Ausführung der Funktion bei jedem Frame ausgelöst, wenn das Fenster gezoomt wird, und die DOM-Operationen werden kontinuierlich wiederholt, was sehr teuer ist Browser. Da der Browser das DOM beim Zoomen neu berechnet, warum können wir die Berechnung des DOM nicht verzögern und das Fenster nicht mehr zoomen lassen, bevor wir es neu berechnen, um den Overhead des Browsers zu sparen und den Optimierungseffekt bereits zu erzielen?

Wissensvorbereitung

1. setTimeout(code, millisec) ist natürlich der Protagonist dieses Artikels.

Die Methode setTimeout() wird verwendet, um eine Funktion oder einen berechneten Ausdruck nach einer angegebenen Anzahl von Millisekunden aufzurufen.

Code ist erforderlich. Die Zeichenfolge des JavaScript-Codes, der nach der aufzurufenden Funktion ausgeführt werden soll.

Millisekunden sind erforderlich. Die Anzahl der Millisekunden, die vor der Codeausführung gewartet werden soll.

Tipp: setTimeout() führt Code nur einmal aus. Wenn Sie es mehrmals aufrufen möchten, verwenden Sie setInterval() oder lassen Sie den Code selbst setTimeout() erneut aufrufen.

Weit verbreitet in Timern, Karussells, Animationseffekten, automatischem Scrollen usw.

2. clearTimeout(id_of_setTimeout)

Parameter id_of_settimeout Der von setTimeout() zurückgegebene ID-Wert. Dieser Wert identifiziert den Codeblock mit verzögerter Ausführung, der abgebrochen werden soll.

3. fun.apply(thisArg[, argsArray])

Die Methode „apply()“ gibt diesen Wert und diese Parameter an (Parameter liegen in Form von Arrays oder Arrays vor). Wie Objekte Rufen Sie eine Funktion auf

Die Syntax dieser Funktion ist fast dieselbe wie die der call()-Methode. Der einzige Unterschied besteht darin, dass die call()-Methode eine Parameterliste akzeptiert, während apply() Akzeptiert ein Array (oder ein Array-ähnliches Objekt), das mehrere Parameter enthält.

Parameter

thisArg

Der angegebene Wert, wenn die Fun-Funktion ausgeführt wird. Es ist zu beachten, dass der angegebene Wert nicht unbedingt der tatsächliche Wert ist, wenn die Funktion ausgeführt wird. Wenn sich die Funktion im nicht-strikten Modus befindet, zeigt sie automatisch auf das globale Objekt (Fensterobjekt im Browser). angegeben als null oder undefiniert), und this, dessen Wert ein primitiver Wert (Zahl, Zeichenfolge, boolescher Wert) ist, zeigt auf das automatische Umbruchobjekt des primitiven Werts.

argsArray

Ein Array oder Array-ähnliches Objekt, dessen Array-Elemente als separate Parameter an die Fun-Funktion übergeben werden. Wenn der Wert dieses Parameters null oder undefiniert ist, bedeutet dies, dass keine Parameter übergeben werden müssen. Ab ECMAScript 5 sind arrayartige Objekte verfügbar.

Wenn Sie eine vorhandene Funktion aufrufen, können Sie ein this-Objekt dafür angeben. Dies bezieht sich auf das aktuelle Objekt, das das Objekt ist, das diese Funktion aufruft. Mit apply können Sie die Methode einmal schreiben und sie dann in ein anderes Objekt vererben, ohne die Methode wiederholt in das neue Objekt schreiben zu müssen.

4. fun.call(thisArg[, arg1[, arg2[, ...]]])

Diese Methode verwendet einen angegebenen this-Wert und ruft a auf Funktion oder Methode mit mehreren angegebenen Parameterwerten

Parameters

thisArg

wenn die Fun-Funktion ausgeführt wird. Der angegebene Wert. Es ist zu beachten, dass der angegebene this-Wert nicht unbedingt der tatsächliche this-Wert ist, wenn die Funktion ausgeführt wird. Wenn sich die Funktion im nicht-strikten Modus befindet, zeigt der als null und undefiniert angegebene this-Wert automatisch auf das globale Objekt (im). Browser, das ist ein Fensterobjekt), und dieses, dessen Wert ein Grundwert (Zahl, Zeichenfolge, boolescher Wert) ist, zeigt auf das automatische Umbruchobjekt des Grundwerts.

arg1, arg2, ...

Die angegebene Parameterliste.

Beim Aufruf einer Funktion können Sie diesem Objekt ein anderes zuweisen. Dies bezieht sich auf das aktuelle Objekt, den ersten Parameter der Aufrufmethode. Über die Aufrufmethode können Sie Methoden für ein Objekt von einem anderen Objekt ausleihen, z. B. Object.prototype.toString.call([]), bei dem es sich um ein Array-Objekt handelt, das Methoden für das Object-Objekt ausleiht.

Funktion:

Verwenden Sie die Call-Methode, um den übergeordneten Konstruktor aufzurufen

Verwenden Sie die Call-Methode, um die anonyme Funktion aufzurufen

Verwenden Sie die Call-Methode, um eine anonyme Funktion aufzurufen und das „This“ des Kontexts anzugeben

Ein Exkurs hier:

Anwenden ist sehr ähnlich Bei call() besteht der Unterschied darin, wie Parameter bereitgestellt werden. apply verwendet ein Array von Argumenten anstelle einer Liste von Argumenten. apply kann Array-Literale wie fun.apply(this, ['eat', 'bananas']) oder Array-Objekte wie fun.apply(this, new Array('eat', 'bananas' )) verwenden. Sie können Argumentobjekte auch als argsArray-Argumente verwenden. Argumente sind lokale Variablen einer Funktion. Es kann als beliebiger nicht spezifizierter Parameter des aufgerufenen Objekts verwendet werden. Auf diese Weise müssen Sie bei Verwendung der Apply-Funktion nicht alle Parameter des aufgerufenen Objekts kennen. Sie können Argumente verwenden, um alle Argumente an das aufgerufene Objekt zu übergeben. Das aufgerufene Objekt ist dann für die Verarbeitung dieser Parameter verantwortlich.

Ab ECMAScript Version 5 können Sie jede Art von Array-ähnlichen Objekten verwenden, das heißt, solange es über eine Längeneigenschaft und eine Ganzzahleigenschaft im Bereich [0...Länge ). Sie können jetzt beispielsweise NodeList oder ein selbstdefiniertes Objekt ähnlich wie {'length': 2, '0': 'eat', '1': 'bananas'} verwenden.

Der Unterschied zwischen den Call- und Apply-Methoden besteht darin, dass ab dem zweiten Parameter die Call-Methodenparameter der Reihe nach als Parameter an die geliehene Methode übergeben werden, während Apply diese Parameter direkt in ein Array einfügt und übergibt sie dann. Schließlich ist die Parameterliste der geliehenen Methode dieselbe.

Anwendungsszenario: Wenn die Parameter klar sind, kann der Aufruf verwendet werden, und wenn die Parameter unklar sind, kann er angewendet werden verwendet werden, um die Argumente anzuwenden

Geben Sie nun ein Beispiel

Wie wir alle wissen, sind Onscolll, Onresize usw. sehr leistungsintensiv und Zahlen werden gedruckt, wenn Das Fenster ist skaliert.

var count = ;
window.onresize = function () {
count++;
console.log(count);
}

Strecken Sie die Browserfenstergröße im Chrome-Browser aus und drucken Sie wie folgt

Das sind offensichtlich nicht wir Wenn wir es wollen und zu einer Ajax-Anfrage wechseln, wird das Fenster einmal skaliert und mehrere Ajax-Anfragen werden kontinuierlich ausgelöst. Versuchen wir es natürlich mit der Funktionsdrosselung und fügen Sie einen settimeout()-Timer hinzu. Ganz gut,

Die erste Verpackungsmethode

var count = ;
function oCount() {
count++;
console.log(count);
}
window.onresize = function () {
delayFun(oCount)
};
function delayFun(method, thisArg) {
clearTimeout(method.props);
method.props = setTimeout(function () {
method.call(thisArg)
}, )
}

Die zweite Verpackungsmethode

Konstruieren Sie einen Verschluss und verwenden Sie den Verschluss um einen privaten Bereich zum Speichern des Timers zu bilden. Der Timer wird durch Übergabe von Parametern eingeführt.

var count = ;
function oCount() {
count++;
console.log(count);
}
var funs= delayFun(oCount,);
window.onresize = function () {
funs()
};
function delayFun(func, wait) {
var timer = null;
return function () {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
func.apply(context, args);
}, wait)
};
}

Optimieren Sie die zweite Methode, die Leistung wird besser sein

Hier wird eine Funktion zurückgegeben, wenn ja Wird ohne Unterbrechung aufgerufen, wird es nicht ausgeführt. Die Funktion wird erst ausgeführt, wenn sie N Millisekunden nach Beendigung des Aufrufs erneut aufgerufen wird. Wenn der Parameter „immediate“ übergeben wird, wird die Funktion sofort und ohne Verzögerung in die Ausführungswarteschlange eingeplant. Die Funktion

function delayFun (func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// 用法
var myEfficientFn = delayFun (function() {
// 所有繁重的操作
}, );
window.addEventListener('resize', myEfficientFn);

erlaubt nicht, dass die Callback-Funktion innerhalb der angegebenen Zeit mehr als einmal ausgeführt wird. Diese Funktion ist besonders wichtig, wenn Sie einem Ereignis, das häufig ausgelöst wird, eine Rückruffunktion zuweisen.

setTimeout ist so leistungsstark, können wir es in Projekten umfassend nutzen?

Ich persönlich empfehle es nicht. In unserem Unternehmen ist die Verwendung von setTimeout in der Geschäftslogik grundsätzlich verboten, da viele der Verwendungsmethoden, die ich gesehen habe, leicht zu lösen sind Als Hacker.

Wenn beispielsweise eine Instanz nicht initialisiert wurde, verwenden wir diese Instanz. Die falsche Lösung besteht darin, bei Verwendung der Instanz ein setTimeout hinzuzufügen, um sicherzustellen, dass die Instanz zuerst initialisiert wird.

Warum ist es falsch? Dies ist eigentlich eine Methode zur Verwendung von Hacks

Die erste besteht darin, eine Falle zu stellen und den Lebenszyklus des Moduls zu stören

Die zweite besteht darin, dass, wenn ein Problem auftritt, setTimeout ist tatsächlich sehr schwer zu debuggen.

Was die clevere Verwendung von setTimeout in JS und die Drosselung von Front-End-Funktionen betrifft, wird der Herausgeber es Ihnen hier vorstellen. Ich hoffe, es wird Ihnen hilfreich sein!

Für eine cleverere Verwendung von setTimeout in JS und verwandte Artikel zur Drosselung von Front-End-Funktionen beachten Sie bitte die chinesische PHP-Website!