Clevere Verwendung von setTimeout in der JS-Frontend-Funktion throttling_javascript skills

Was ist Funktionsdrosselung?

Funktionsdrosselung bedeutet einfach, dass wir nicht möchten, dass die Funktion in kurzer Zeit kontinuierlich aufgerufen wird. Am häufigsten führen wir beispielsweise beim Zoomen des Fensters häufig andere Betriebsfunktionen aus. Wenn Sie beispielsweise eine Ajax-Anfrage senden, ist es möglich, mehrere Anfragen kontinuierlich zu senden, was nicht das ist, was wir wollen, oder unser üblicher Tab-Wechseleffekt, bei dem die Maus manchmal kontinuierlich und sehr stark bewegt wird Manchmal kommt es zu einem Flackereffekt. 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~

Grundprinzipien der Funktionsdrosselung:

Verwenden Sie zunächst einen Timer, um die Ausführung der Funktion zu verzögern. Verwenden Sie beispielsweise die Funktion setTomeout(), um die Ausführung der Funktion um einen bestimmten Zeitraum zu verzögern die Methode „clearTimeout()“: Um den Timer zu löschen, setzen Sie einen neuen Timer, um die Ausführung um eine Weile zu verzögern.

Kürzlich war ein Team mit einem Projekt wie dieser beschäftigt, das im traditionellen Modus entwickelt wurde (es beschwert sich darüber, warum es nicht viele DOM-Operationen verwendet) und seine Leistung Relativ schlecht, besonders wenn man in das Fenster hinein- und herauszoomt, ist es schrecklich. Es ist etwas passiert, es sind Verzögerungen aufgetreten oder sogar der Browser ist abgestürzt. 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 für den Browser sehr kostspielig ist. Da der Browser das DOM neu berechnet, wenn das Fenster gezoomt wird, 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 setTimeout()-Methode 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)

Der Parameter id_of_settimeout ist 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() ruft eine Funktion auf, indem sie diesen Wert und Parameter angibt (die Parameter liegen in Form eines Arrays oder arrayähnlichen Objekts vor)

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

Parameter

thisArg

Dieser Wert wird angegeben, 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 dies, 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 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 ruft eine Funktion oder Methode unter Verwendung eines angegebenen Werts und mehrerer angegebener Parameterwerte auf.

Parameter

thisArg

Dieser Wert wird angegeben, wenn die Fun-Funktion ausgeführt wird. 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 Aufrufmethode, um den übergeordneten Konstruktor aufzurufen

Verwenden Sie die Call-Methode, um anonyme Funktionen aufzurufen

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

Ein Exkurs hier:

Apply ist call() sehr ähnlich, der Unterschied liegt in der Art und Weise, wie die Parameter bereitgestellt werden. apply verwendet ein Array von Parametern anstelle einer Reihe von Parameterlisten. 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) verfügt. 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 Parameter der Call-Methode als Parameter an die geliehene Methode übergeben werden, während Apply diese Parameter direkt in ein Array einfügt und sie dann übergibt, und schließlich die Parameterliste der geliehenen Methode Es ist das Gleiche.

Anwendungsszenario: call kann verwendet werden, wenn die Parameter klar sind, und apply kann zum Kombinieren von Argumenten verwendet werden, wenn die Parameter unklar sind

Geben Sie nun ein Beispiel

Wie wir alle wissen, sind Onscolll, Onresize usw. sehr leistungsintensiv und Zahlen werden gedruckt, wenn das Fenster gezoomt wird.

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

Verkleinern und verkleinern Sie die Browserfenstergröße im Chrome-Browser, drucken Sie wie folgt

Das ist offensichtlich nicht das, was wir wollen. Wenn wir zu einer Ajax-Anfrage wechseln, wird das Fenster einmal skaliert und mehrere Ajax-Anfragen werden nacheinander ausgelöst. Versuchen wir es natürlich mit einer Funktionsdrosselung. ) Timer,

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

Erstellen Sie einen Abschluss und verwenden Sie den Abschluss, 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 und die Leistung wird besser sein

Dies gibt eine Funktion zurück, die nicht ausgeführt wird, wenn sie ohne Unterbrechung aufgerufen wird. 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.

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); 

Die Funktion lässt nicht zu, dass die Rückruffunktion mehr als einmal innerhalb der angegebenen Zeit 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, setTimeout in der Geschäftslogik zu verwenden, da viele der Verwendungsmethoden, die ich gesehen habe, leicht zu lösende Probleme sind und setTimeout als Hack verwendet wird.

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

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

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

Der zweite Grund ist, dass setTimeout tatsächlich schwierig zu debuggen ist, wenn ein Problem auftritt.

Ich denke, die richtige Art, es zu verwenden, besteht darin, sich den Lebenszyklus anzusehen (siehe „Über den Lebenszyklus von Software“) und vor der Verwendung die Instanziierung zu erwähnen.

Was den cleveren Einsatz 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!