So verstehen Sie die JS-Funktion Anti-Shake und Funktionsdrosselung

Überblick

Sowohl die Funktion „Anti-Shake“ als auch die Funktion „Throttling“ definieren eine Funktion, die eine Funktion als Parameter empfängt und eine Funktion mit hinzugefügtem „Anti-Shake“ oder „Throttling“ zurückgibt.

Daher können die Funktionen Anti-Shake und Funktionsdrosselung als Funktionsfabrik betrachtet werden, die dafür verantwortlich ist, die eingehende Funktion entsprechend zu verarbeiten und zu ändern und dann eine neue Funktion mit bestimmten Funktionen zu erstellen.

Die Funktion Anti-Shake wird nur einmal innerhalb eines bestimmten Zeitraums ausgeführt, während die Funktion Throttling in Intervallen ausgeführt wird

Angenommen, es gibt ein solches Szenario: Auf einer bestimmten Seite gibt es eine Schaltfläche namens „Mehr laden“. Die Funktion dieser Schaltfläche besteht darin, mithilfe von Ajax weitere Daten vom Backend-Server anzufordern, die auf der Seite angezeigt werden sollen. Wir alle wissen, dass die Antwort auf eine Ajax-Anforderung asynchron ist und eine bestimmte Antwortzeit aufweist. Wenn der Benutzer unmittelbar nach dem Klicken erneut auf die Schaltfläche klickt, wird die Rückruffunktion gemäß der Funktionsweise der herkömmlichen Rückruffunktion sofort erneut ausgeführt. Wenn der Benutzer in diesem Fall innerhalb kurzer Zeit zweimal auf die Schaltfläche „Mehr laden“ klickt, wird die Rückruffunktion ausgeführt, um zwei identische Ajax-Anforderungen an das Backend zu initiieren. Der Server empfängt die Anforderungen nacheinander und verarbeitet die zurückgegebenen Daten. Zwei Anforderungen innerhalb kurzer Zeit sind in Ordnung, aber was passiert, wenn der Benutzer n-mal hintereinander auf die Schaltfläche „Mehr laden“ klickt? Dann werden in kurzer Zeit n identische Anfragen an den Server gesendet. Jedes Mal, wenn das Backend die Ajax-Anfrage verarbeitet und Daten zurückgibt, wird die Seite neu gerendert, obwohl sich der Inhalt nicht geändert hat. Dies führt zu Leistungsproblemen und belastet nicht nur den Server, sondern verursacht auch unnötiges Rendering für den Browser. Dies ist ein Nebeneffekt der häufigen Funktionsausführung.

Wie können wir also die Klickereignis-Rückruffunktion dieser Schaltfläche einstellen, um die Nebenwirkungen zu reduzieren, die durch die häufige Ausführung dieser Funktion verursacht werden?

1. Funktion Entprellung

Die Designidee der Funktion Anti-Shake besteht darin, eine Wartezeit hinzuzufügen, bevor die Funktion ausgeführt wird. Wenn die Funktion während dieser Wartezeit erneut ausgeführt werden muss, wird die Wartezeit neu berechnet und die Funktion erneut gewartet. Dieser Vorgang wird wiederholt, bis die Wartezeit abgelaufen ist und die Funktion nicht erneut ausgeführt werden muss.

Nehmen wir als Beispiel das obige Szenario. Angenommen, die Antwortzeit beim Senden einer Ajax-Anforderung an das Backend beträgt etwa 2 Sekunden, dann legen Sie die Wartezeit auf 2 Sekunden fest. Wenn der Benutzer zum ersten Mal auf die Schaltfläche „Mehr laden“ klickt, wird die Rückruffunktion nicht sofort ausgeführt, d. h., die Ajax-Anforderung wurde noch nicht gesendet. Zu diesem Zeitpunkt wartet die Funktion. Wenn der Benutzer innerhalb von 2 Sekunden erneut auf „Mehr laden“ klickt, wird die Wartezeit neu berechnet und es werden weitere 2 Sekunden gewartet. Zu diesem Zeitpunkt sind 2 Sekunden vergangen und der Benutzer hat nicht zum dritten Mal auf die Schaltfläche „Mehr laden“ geklickt. Dann beginnt die Funktion mit der Ausführung und sendet eine Ajax-Anforderung an das Backend.

Die Funktion Anti-Shake ist wie folgt implementiert:

Funktion Entprellung(fn, Verzögerung){
    let timeId = null
    Rückgabefunktion(){
        lass Kontext = dies
        wenn(Zeit-ID){Fenster.Zeitüberschreitung(Zeit-ID)}
        ZeitId = setzeTimeout(()=>{
            fn.apply(Kontext, Argumente)
            timeId = null
        },Verzögerung)
    }
}

2. Funktionsdrosselung

Die Entwurfsidee der Funktionsdrosselung besteht darin, nach der Ausführung der Funktion eine Abkühlzeit hinzuzufügen. Die Funktion wird sofort ausgeführt, wenn sie zum ersten Mal ausgeführt wird, aber nach ihrer Ausführung wird eine Abkühlzeit festgelegt. Während der Abkühlzeit kann die Funktion erst dann erneut ausgeführt werden, wenn die Abkühlzeit abgelaufen ist und die Ausführung der Funktion zulässig ist.

Nehmen wir das obige Szenario als Beispiel. Angenommen, die Abkühlzeit ist ebenfalls auf 2 Sekunden eingestellt. Nachdem der Benutzer zum ersten Mal auf „Mehr laden“ geklickt hat, wird die Rückruffunktion der Schaltfläche ausgeführt, d. h. eine Ajax-Anforderung wird in den Hintergrund gesendet. Zu diesem Zeitpunkt klickt der Benutzer sofort erneut auf die Schaltfläche „Mehr laden“. Da die Abkühlzeit von 2 Sekunden zu diesem Zeitpunkt noch nicht abgelaufen ist, wird der zweiten Funktionsausführung eine verzögerte Ausführung hinzugefügt.

Funktion Drosselklappe (fn, Verzögerung) {
    let canUse = true
    Rückgabefunktion(){
        wenn(kannVerwenden){
            fn.apply(diese, Argumente)
            kann verwenden = false
            setTimeout(()=>canUse=true, Verzögerung)
        }
    }
}

Oben finden Sie Einzelheiten zum Verständnis der JS-Funktion „Anti-Shake“ und der Funktionsdrosselung. Weitere Informationen zur JS-Funktion „Anti-Shake“ und der Funktionsdrosselung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!