Implementierungs- und Nutzungsszenarien der JS-Anti-Shake-Drosselungsfunktion

1. Was ist die Anti-Shake-Funktion?

Konzept: Funktionsentprellung bedeutet, dass eine Funktion nach dem Auslösen eines Ereignisses nur einmal innerhalb von n Sekunden ausgeführt werden kann. Wenn innerhalb von n Sekunden nach dem Auslösen des Ereignisses ein weiteres Ereignis ausgelöst wird, wird die Verzögerungszeit der Funktionsausführung neu berechnet.

1. Warum brauchen wir eine Anti-Shake-Funktion?

Während des Front-End-Entwicklungsprozesses gibt es einige Ereignisse, wie z. B. onresize, scroll, mousemove, mousehover usw., die häufig ausgelöst werden (mehrmals in kurzer Zeit). Wenn es keine Begrenzung gibt, ist es möglich, dass sie innerhalb einer Sekunde Dutzende oder Hunderte Male ausgeführt werden. Wenn innerhalb dieser Funktionen andere Funktionen ausgeführt werden, insbesondere Funktionen, die DOM betreiben (Browseroperationen auf DOM sind sehr leistungsintensiv), wird dies nicht nur Computerressourcen verschwenden, sondern auch das Programm verlangsamen und sogar dazu führen, dass der Browser einfriert oder abstürzt.

2. Wichtige Punkte der Funktion Anti-Shake

Der entscheidende Punkt beim Entschütteln von Funktionen besteht darin, dass ein setTimeout erforderlich ist, um die Implementierung zu unterstützen und die Ausführung des auszuführenden Codes zu verzögern. Wenn die Methode mehrmals ausgelöst wird, wird der beim letzten Mal aufgezeichnete verzögerte Ausführungscode mit „clearTimeout“ gelöscht und die Zeitmessung erneut gestartet. Wenn das Ereignis während des Zeitintervalls nicht erneut ausgelöst wird, wird der Zielcode nach Ablauf der Verzögerungszeit ausgeführt.

3. Implementierung der Funktion Anti-Shake

//HTML-Teil <div>
    Konto: <input type="text" id="myinput">
</div>

//JS-Teilfunktion debounce(fun,wait=1500){//ES6-Syntax wait=1500 legt den Standardwert des Parameters fest. Wenn wait nicht eingegeben wird, wird 1500 verwendet.
        let timeout = null
        Rückgabefunktion(){
            if(timeout){//Wenn ein Timer existiert, lösche ihn clearTimeout(timeout)
            }
            Zeitüberschreitung = Zeitüberschreitung festlegen (Funktion () {
                Spaß()
            },Warten)
        }

    }
Funktion testUname(){
    console.log("Ende der Eingabe!")
}
document.getElementById('meineEingabe').addEventListener('Eingabe',Entprellung(testUname,1000))

Der obige Code ist eine einfache Anwendung der Anti-Shake-Funktion. Solange das Intervall zwischen den einzelnen Eingaben größer als eine Sekunde ist, wird „Druckeingabe Ende!“ nie angezeigt, bis Sie mit der Eingabe aufhören. Dies liegt daran, dass jede Eingabe den vorherigen Timer löscht.

Glauben Sie, dass es vorbei ist, nachdem Sie dies gelesen haben? Keine Sorge, wir schauen weiter:

//HTML-Teil <div>
    Konto: <input type="text" id="myinput">
</div>

//JS-Teilfunktion debounce(fun,wait=1500){
        let timeout = null
        Rückgabefunktion(){
            console.log(dies) //<input id="myinput" type="text">
            console.log(Argumente) // Argumente { 0: Eingabe, … }
            if(timeout){//Wenn ein Timer existiert, lösche ihn clearTimeout(timeout)
            }
            Zeitüberschreitung = Zeitüberschreitung festlegen (Funktion () {
                console.log(dieses) //Fenster
                console.log(Argumente) // Argumente { … }
                Spaß()
            },Warten)
        }

    }
Funktion testUname(){
    console.log("Ende der Eingabe!")
}
document.getElementById('meineEingabe').addEventListener('Eingabe',Entprellung(testUname,1000))

Unabhängig davon, ob es sich um Anti-Shake oder Drosselung handelt, müssen wir zwei Probleme lösen: diesen Hinweis und diese Argumente.

Wenn kein spezieller Verweis vorhanden ist, bezieht sich dies in den Rückruffunktionen von setInterval und setTimeout auf window. Dies liegt daran, dass die JS-Timermethode unter Fenster definiert ist. Dies ist offensichtlich nicht das, was wir wollen, da wir das Eingabefeld überwachen und daher möchten, dass dies im Timer auf die Eingabe verweist.

Gibt es also eine Möglichkeit, den Hinweis zu ändern?

Eine einfache Möglichkeit besteht darin, dass wir Parameter verwenden können, um dies und die Argumente der äußeren Timerfunktion zu speichern. Ändern Sie anschließend mit „Apply“ die Richtung der vom Timer auszuführenden Funktion „fun“.

//JS-Teilfunktion debounce(fun,wait=1500){
            let timeout = null
            Rückgabefunktion(){
                lass _dies = dies
                let arg = Argumente
                if(timeout){//Wenn ein Timer existiert, lösche ihn clearTimeout(timeout)
                }
                Zeitüberschreitung = Zeitüberschreitung festlegen (Funktion () {
                    console.log(_this) //<input id="myinput" type="text">
                    console.log(arg) // Argumente { 0: Eingabe, … }
                    Spaß.anwenden(_this,arg)
                },Warten)
            }
         
        }

Natürlich können Sie auch die neue Funktion der ES6-Pfeilfunktion verwenden: Das „this“ der Pfeilfunktion zeigt immer auf „this“, wenn die Funktion definiert wird, und nicht, wenn sie ausgeführt wird. Bei Pfeilfunktionen muss dieser Satz beachtet werden: „In der Pfeilfunktion gibt es keine this-Bindung, und ihr Wert muss durch Nachschlagen in der Gültigkeitsbereichskette ermittelt werden. Wenn die Pfeilfunktion in einer Nicht-Pfeilfunktion enthalten ist, wird this an das this der nächsten Nicht-Pfeilfunktion gebunden, andernfalls ist this undefiniert.“

Man kann also auch schreiben:

//JS-Teilfunktion debounce(fun,wait=1500){
            let timeout = null
            Rückgabefunktion(){
                if(timeout){//Wenn ein Timer existiert, lösche ihn clearTimeout(timeout)
                }
                Zeitüberschreitung = setzeZeitüberschreitung(()=>{
                    console.log(dies) //<input id="myinput" type="text">
                    console.log(Argumente) // Argumente { 0: Eingabe, … }
                    Spaß.anwenden(dies,Argumente)
                },Warten)
            }
         
        }

4. Einsatzszenarien der Funktion Anti-Shake

In welchen Situationen wird die Anti-Shake-Funktion im Allgemeinen verwendet? Es wird im Allgemeinen verwendet, wenn kontinuierliche Ereignisse nur einmal einen Rückruf auslösen müssen. Speziell:

• Suchfeld sucht nach Eingabe. Warten Sie einfach, bis der Benutzer die Eingabe zum letzten Mal abgeschlossen hat, bevor Sie die Anfrage senden.
• Überprüfung der Eingabe von Benutzername, Mobiltelefonnummer und E-Mail;
• Wenn sich die Größe des Browserfensters ändert, führen Sie den Code einfach im Größenänderungsereignis aus, nachdem das Fenster angepasst wurde, um wiederholtes Rendern zu vermeiden.

2. Was ist Funktionsdrosselung

Konzept: Beschränken Sie eine Funktion darauf, innerhalb eines bestimmten Zeitraums nur einmal ausgeführt zu werden.

Wenn Sie beispielsweise mit dem Zug oder der U-Bahn durch die Sicherheitskontrolle gehen, darf innerhalb einer bestimmten Zeitspanne (beispielsweise 10 Sekunden) nur ein Passagier den Eingang der Sicherheitskontrolle passieren, um mit dem Sicherheitspersonal zusammenzuarbeiten und die Sicherheitskontrolle abzuschließen. Im obigen Beispiel darf nur alle 10 Sekunden ein Passagier passieren. Aus der Analyse können wir erkennen, dass der Kernpunkt der „Funktionsdrosselung“ darin besteht, eine Aktion so zu beschränken, dass sie innerhalb eines bestimmten Zeitraums nur einmal ausgeführt wird.

1. Wichtige Punkte zur Funktionsdrosselung

Die Hauptimplementierungsidee besteht darin, den Timer setTimeout zu verwenden. Durch Festlegen der Verzögerungszeit wird beim ersten Aufruf ein Timer erstellt, zuerst eine Variable festgelegt, dieser Variable der Timer zugewiesen und dann die auszuführende Funktion geschrieben. Wenn diese Funktion zum zweiten Mal ausgeführt wird, ermittelt sie, ob die Variable wahr ist, und gibt einen entsprechenden Wert zurück. Wenn der erste Timer die Funktion ausführt, wird die Variable auf „false“ gesetzt. Dann wird die Variable beim nächsten Mal beurteilt und ist falsch, und die Funktionen werden der Reihe nach ausgeführt. Der Zweck besteht darin, sicherzustellen, dass innerhalb eines bestimmten Zeitraums nur der letzte Aufruf mehrerer Funktionsanforderungen ausgeführt wird.
Ist es ein wenig verwirrend, es auf diese Weise zu betrachten? Schauen wir uns den Code an:

2. Implementierung der Funktionsdrosselung

//JS-Teilfunktion debounce(fun,wait=1000){//Timer-Lösung let timer = null;//Setze zuerst eine Variable return function(){
                if(!timer){//Wenn der Timer null ist, geben Sie timer = setTimeout(function(){ ein//Weisen Sie dann dieser Variable den Timer zu fun()//Schreiben Sie dann die auszuführende Funktion timer = null//Der erste Timer führt die Funktion aus und setzt die Variable abschließend auf false. Dabei hat timer = null zwei Funktionen: 1. Öffnen des nächsten Eintrags, 2. Löschen des nachfolgenden Timers})

                }
            }
        }
Funktion testUname(){
    Konsole.log(Math.random())
}
document.getElementById('meineEingabe').addEventListener('Eingabe',debounce(testUname))

In ähnlicher Weise muss auch die Drosselungsfunktion das Problem dieser und anderer Argumente lösen. Die Verbesserung ist wie folgt:

//Pfeilfunktion schreibt Funktion debounce(fun,wait=1000){
            let timer = null
            Rückgabefunktion(){
                wenn(!timer){
                    Timer = setzeTimeout(()=>{
                        Spaß.anwenden(dies,Argumente)
                        Timer = null
                    },Warten)

                }
            }
}
//Methode zur Parametererhaltung function debounce(fun,wait=1000){
        let timer = null
        Rückgabefunktion(){
            lass _dies = dies
            let arg = Argumente
            wenn(!timer){
                Timer = setzeTimeout(Funktion(){
                    Spaß.anwenden(_this,arg)
                    Timer = null
                },Warten)

            }
        }
}

3. Anwendungsszenarien der Funktionsdrosselung

Ich glaube, Sie sollten jetzt ein besseres Verständnis für die Funktionsdrosselung haben. In welchen Situationen wird die Funktionsdrosselung also im Allgemeinen verwendet?

• Lazy Loading, Scroll Loading, Mehr laden oder Position der Bildlaufleiste überwachen;
• Baidu-Suchfeld, Suchassoziationsfunktion;
• Verhindern Sie das Einreichen von häufigen Klicks und wiederholten Formulareinreichungen.

Zusammenfassen

Damit ist dieser Artikel über die Implementierung und Verwendungsszenarien der JS-Anti-Shake-Drosselfunktion abgeschlossen. Weitere relevante Inhalte zur JS-Anti-Shake-Drosselfunktion finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass alle 123WORDPRESS.COM in Zukunft unterstützen werden!