Unterschied und Implementierung von JavaScript Anti-Shake und Throttling

Vorwort:

Als Frontend-Entwickler gibt es zwei Anforderungen:

(1) Suchvoraussetzungen

Die Suchlogik dient dazu, Benutzereingabeereignisse zu überwachen, nach Abschluss der Benutzereingabe Daten an das Backend zu senden, das Backend gibt die übereinstimmenden Daten zurück und das Frontend zeigt die Daten auf der Seite an. Wenn eine Anfrage gesendet wird, unmittelbar nach der Benutzereingabe, verursacht dies einen Anfragedruck auf dem Backend und die Häufigkeit der Anfragen muss kontrolliert werden.

(2) Die Seite lädt Daten unendlich

Die Logik des unendlichen Ladens von Daten auf einer Seite besteht darin, die Bildlaufvorgänge des Benutzers zu überwachen und während des Bildlaufs des Benutzers die Anzeige der nächsten Datenseite auf der Seite anzufordern. , dann senden Sie, solange Sie scrollen, eine Anfrage, die auch Druck auf die Backend-Anfrage ausübt, und Sie müssen die Häufigkeit der Anfragen kontrollieren.

Bei den beiden oben genannten Problemen handelt es sich anscheinend um Probleme bei der Steuerung der Anforderungshäufigkeit, aber die Anforderungen sind etwas unterschiedlich: Bei der Suche gibt der Benutzer die Eingabe mehrmals ein und die Anforderung wird erst gesendet, wenn der Benutzer die Eingabe für kurze Zeit unterbricht. Zu diesem Zeitpunkt ist ein Anti-Shake-System erforderlich, um dies zu erreichen. Beim Laden von Scrolldaten werden in bestimmten Abständen Daten angefordert, während der Benutzer die Seite scrollt. Auch wenn der Benutzer weiter scrollt, wird die Anforderung ausgeführt, anstatt darauf zu warten, dass der Benutzer mit dem Scrollen aufhört. In diesem Fall ist eine Drosselung erforderlich, um dies zu erreichen.

1. Anti-Shake

Bedeutung:

Das lässt sich ganz einfach so verstehen: Wenn ein Benutzer ein Ereignis mehrmals auslöst, wird das Ereignis nicht ausgeführt, solange der Benutzer das Ereignis weiterhin auslöst. Das Ereignis wird nur einmal ausgeführt, nachdem der Benutzer das Ereignis für eine bestimmte Zeit nicht mehr auslöst.

erreichen:

// @fn sind die entsprechenden Anforderungsdaten // @ms ist der Zeitabstand zwischen mehreren Auslösungen des Ereignisses durch den Benutzer in Millisekunden function debounce(fn, ms) {
        let timeout = null
        return Funktion() {
            Zeitüberschreitung löschen (Zeitüberschreitung)
            Zeitüberschreitung = setzeZeitüberschreitung(() => {
                fn.apply(diese, Argumente)
            }, MS)
        }
    }

Prinzip:

Jedes Mal, wenn der Benutzer ein Ereignis auslöst, wird die Ausführung verzögert. Vor dem Einstellen des Verzögerungstimers wird der vorherige Verzögerungstimer gelöscht. Schließlich wird das Ereignis nur dann ausgelöst, wenn das Intervall zwischen aufeinanderfolgenden Benutzerauslösungen den von uns festgelegten Parameter ms Millisekunden überschreitet.

prüfen:

<input id="Sucheingabe"/>
    Funktion getData(){
        console.log('Anfrage wird gesendet...')
    }
    document.getElementById('searchInput').oninput = Entprellung(getData, 800)
    // Wenn der Benutzer weiter tippt, wird keine Anforderung gesendet. // Daten werden nur angefordert, wenn das kontinuierliche Eingabeintervall des Benutzers 800 ms überschreitet, d. h. Daten werden nur angefordert, wenn der Benutzer innerhalb von 800 ms keine Eingabe tätigt.

2. Drosselung

Bedeutung:

Man kann es sich so leicht vorstellen: Der Benutzer löst das Ereignis mehrere Male aus. Das Ereignis wird in bestimmten Abständen einmal ausgeführt, während der Benutzer das Ereignis weiterhin auslöst und es mehrere Male ausgeführt wird.

erreichen:

    // @fn sind die entsprechenden Anforderungsdaten // @ms ist das Zeitintervall zwischen mehreren vom Benutzer ausgelösten Ereignissen in Millisekunden function throttle(fn, ms){
        let-Flag = true
        Rückgabefunktion(){
            wenn(!flag) return
            Flagge = falsch
            setzeTimeout(()=>{
                fn.apply(diese, Argumente)
                Flagge = wahr
            }, MS)
        }
    }

Prinzip:

Jedes Mal, wenn ein Benutzer ein Ereignis auslöst, wird ein Verzögerungstimer eingestellt. Wenn jedoch ein Verzögerungstimer eingestellt wurde, wird der nächste Timer erst gestartet, wenn der vorherige Verzögerungstimer ausgeführt wurde. Auf diese Weise löst der Benutzer weiterhin Ereignisse aus und das Ereignis wird einmal in einem bestimmten Zeitraum ausgeführt.

prüfen:

Funktion getData(){
        console.log('Anfrage wird gesendet...')
    }
    window.onscroll = Drosselklappe(getData, 800)
    // Während der Benutzer scrollt, fordert er in Abständen Daten an

3. Zusammenfassung

Bei Drosselung und Anti-Shake geht es im Wesentlichen darum, die Häufigkeit der Ereignisausführung zu steuern, aber der Zeitpunkt der Auslösung von Ereignissen ist grundsätzlich unterschiedlich. Anti-Shake bedeutet, dass ein Benutzer ein Ereignis mehrmals auslöst und das Ereignis einmal ausgeführt wird, wenn der Benutzer aufhört, das Ereignis auszulösen. Drosselung bedeutet, dass ein Benutzer ein Ereignis mehrmals auslöst und das Ereignis während der mehrfachen Auslösevorgänge in Intervallen ausgeführt wird.

Damit ist dieser Artikel über die Unterschiede und die Implementierung von JavaScript Anti-Shake und -Throttling abgeschlossen. Weitere Informationen zu den Unterschieden und der Implementierung von Anti-Shake und Throttling finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!