Eine kurze Diskussion über JavaScript-Drosselung und Anti-Shake

Drosselung und Anti-Shake

Hintergrund : Wenn wir häufig Ressourcen, Schnittstellen und andere Dinge anfordern, führt dies zu häufigen Dom-Operationen, hohem Schnittstellendruck usw., was zu einer Leistungsverschlechterung führt. Beispielsweise habe ich manchmal bei jeder Suche plötzlich die Eingabetaste gedrückt und wenn die Netzwerkverbindung nicht sehr gut war, habe ich ständig auf die Schaltfläche „Nächste Seite“ geklickt. Das kann an der schlechten Netzwerkverbindung oder der geringen Serverleistung liegen.

Um zu vermeiden, dass häufig dasselbe Ereignis oder dieselbe Anforderung ausgelöst wird, werden derzeit Drosselung und Anti-Shake verwendet.

Was? Was ist das? Als ich diese beiden Namen zum ersten Mal hörte, dachte ich, sie bedeuteten die Einsparung von Datenverkehr und die Verhinderung von Handshaking. Ich war verwirrt und begann sofort zu lernen.

Konzept:

Einfach ausgedrückt: Drosselung und Anti-Shake sind zwei Lösungen, um zu verhindern, dass Ereignisse in kurzer Zeit mehrfach ausgelöst werden. Sie alle verwenden die Methode zur Reduzierung der Anzahl der Anfragen, um den Druck zu verringern und die Leistung zu verbessern.

Der Unterschied

Drosselung : Innerhalb eines bestimmten Zeitraums wird nur eine Anfrage gestellt.

Es kann so verstanden werden: In einem Bus ist jede Person eine Klickanforderung, ein Bus fährt alle zehn Minuten und eine Anforderung wird gesendet

Anti-Shake : Die Funktion kann n Sekunden nach Auslösen des Ereignisses ausgeführt werden. Wird das Ereignis innerhalb von n Sekunden ausgelöst, wird die Ausführungszeit neu berechnet.

Wenn ich beispielsweise über einen bestimmten Zeitraum hinweg immer wieder auf eine Schaltfläche klicke, wird auf Grundlage des letzten Klicks eine Anfrage gesendet.

Implementierung der Drosselung

Lösung:

Die Verwendung eines Zeitstempels (der am Anfang eines Zeitraums auftritt) dient zur Berechnung

Die aktuelle Klickzeit - der letzte Zeitpunkt, zu dem die Funktion ausgeführt wurde > der von mir festgelegte Zeitstempel, die Funktion wird einmal ausgeführt

Nachteile: Der erste Trigger wird direkt ausgelöst und der letzte Trigger kann nicht innerhalb eines bestimmten Zeitraums ausgelöst werden

Nehmen wir ein Szenario an, in dem wir nach Daten suchen und eine Anfrage initiieren, ohne eine Verarbeitung durchzuführen. Die Anfrage muss zu häufig sein.

Drosselfunktion

Code:

<Text>
    <div>
        <span>Drosselung</span><input id="input" type="text">
        <button id="btn">Anfrage</button>
    </div>
</body>
<Skript>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000)) //Klick-Ereignis-Listener-Funktion hinzufügen output(e) {
        console.log(dies, e)
        console.log(document.getElementById("input").value) //Eine Anfrage simulieren}
// Drosselungsfunktion function throttle(fn, delay) { // fn ist die auszuführende Funktion, delay ist die Verzögerungszeit var last = 0; // Die letzte Endzeit return function () {
            var aktuell = Datum.jetzt()
            console.log(aktuell-letztes)
            if (aktuell - letzte > Verzögerung) {
                fn.apply(this, arguments) //Funktion ausführen last = cur //Letztes Mal aktualisieren}
        }
    }
</Skript>

Wirkung:

Anti-Shake-Implementierung

Lösung:

Timer (tritt auf, wenn der Timer abgelaufen ist). Nachteile: Das erste Mal löst nicht aus, das letzte Mal ist verzögert

Hiermit wird ein Timer eingestellt. Wenn Sie weiterklicken, wird der Timer gelöscht und das letzte Mal, wenn der Timer eingeschaltet wird

Anti-Shake-Funktion

Code:

<Text>
    <div>
        <span>Anti-Shake-Verarbeitung</span><input id="input" type="text">
        <button id="btn">Anfrage</button>
    </div>
</body>
<Skript>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000)) //Klick-Ereignis-Listener-Funktion hinzufügen output(e) {
        console.log(dies, e)
        console.log(document.getElementById("input").value) //Eine Anfrage simulieren}
    function debounce(fn, delay) { // fn ist die auszuführende Funktion, delay ist die Verzögerungszeit var time = null; // Timer return function () {
            clearTimeout(time); //Timer löschen let context = this; //Den aktuellen Schaltflächenkontext abrufen Wenn nicht angegeben, sucht die Pfeilfunktion immer nach dem Fenster
            lass args = Argumente;
            Zeit = setzeTimeout(() => {
                fn.apply(Kontext, Argumente);
            }, Verzögerung);
        }
    }
</Skript>

Wirkung:

Verbesserte Version mit Anti-Shake-Funktion

Erster Trigger und letzter verzögerter Trigger

Code:

    function throttle(fn, delay) { // fn ist die auszuführende Funktion, delay ist die Verzögerungszeit let time = null
        let flag=true //Ist dies das erste Mal, dass die return-Funktion () ausgelöst wird {
            clearTimeout(Zeit)
            wenn (Flagge) { 
                fn.apply(diese, Argumente)
                Flagge=false
            }
            Zeit = setTimeout(() => { //Timer auslösen fn.apply(this, arguments)
                Flagge = wahr
            }, Verzögerung)
        }
    }

Wirkung:

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Drosselung und Anti-Shake

Hintergrund : Wenn wir häufig Ressourcen, Schnittstellen und andere Dinge anfordern, führt dies zu häufigen Dom-Operationen, hohem Schnittstellendruck usw., was zu einer Leistungsverschlechterung führt. Beispielsweise habe ich manchmal bei jeder Suche plötzlich die Eingabetaste gedrückt und wenn die Netzwerkverbindung nicht sehr gut war, habe ich ständig auf die Schaltfläche „Nächste Seite“ geklickt. Das kann an der schlechten Netzwerkverbindung oder der geringen Serverleistung liegen.

Um zu vermeiden, dass häufig dasselbe Ereignis oder dieselbe Anforderung ausgelöst wird, werden derzeit Drosselung und Anti-Shake verwendet.

Was? Was ist das? Als ich diese beiden Namen zum ersten Mal hörte, dachte ich, sie bedeuteten die Einsparung von Datenverkehr und die Verhinderung von Handshaking. Ich war verwirrt und begann sofort zu lernen.

Konzept:

Einfach ausgedrückt: Drosselung und Anti-Shake sind zwei Lösungen, um zu verhindern, dass Ereignisse in kurzer Zeit mehrfach ausgelöst werden. Sie alle verwenden die Methode zur Reduzierung der Anzahl der Anfragen, um den Druck zu verringern und die Leistung zu verbessern.

Der Unterschied

Drosselung : Innerhalb eines bestimmten Zeitraums wird nur eine Anfrage gestellt.

Es kann so verstanden werden: In einem Bus ist jede Person eine Klickanforderung, ein Bus fährt alle zehn Minuten und eine Anforderung wird gesendet

Anti-Shake : Die Funktion kann n Sekunden nach Auslösen des Ereignisses ausgeführt werden. Wird das Ereignis innerhalb von n Sekunden ausgelöst, wird die Ausführungszeit neu berechnet.

Wenn ich beispielsweise über einen bestimmten Zeitraum hinweg immer wieder auf eine Schaltfläche klicke, wird auf Grundlage des letzten Klicks eine Anfrage gesendet.

Implementierung der Drosselung

Lösung:

Die Verwendung eines Zeitstempels (der am Anfang eines Zeitraums auftritt) dient zur Berechnung

Die aktuelle Klickzeit - der letzte Zeitpunkt, zu dem die Funktion ausgeführt wurde > der von mir festgelegte Zeitstempel, die Funktion wird einmal ausgeführt

Nachteile: Der erste Trigger wird direkt ausgelöst und der letzte Trigger kann nicht innerhalb eines bestimmten Zeitraums ausgelöst werden

Nehmen wir ein Szenario an, in dem wir nach Daten suchen und eine Anfrage initiieren, ohne eine Verarbeitung durchzuführen. Die Anfrage muss zu häufig sein.

Drosselfunktion

Code:

<Text>
    <div>
        <span>Drosselung</span><input id="input" type="text">
        <button id="btn">Anfrage</button>
    </div>
</body>
<Skript>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000)) //Klick-Ereignis-Listener-Funktion hinzufügen output(e) {
        console.log(dies, e)
        console.log(document.getElementById("input").value) //Eine Anfrage simulieren}
// Drosselungsfunktion function throttle(fn, delay) { // fn ist die auszuführende Funktion, delay ist die Verzögerungszeit var last = 0; // Die letzte Endzeit return function () {
            var aktuell = Datum.jetzt()
            console.log(aktuell-letztes)
            if (aktuell - letzte > Verzögerung) {
                fn.apply(this, arguments) //Funktion ausführen last = cur //Letztes Mal aktualisieren}
        }
    }
</Skript>

Wirkung:

Anti-Shake-Implementierung

Lösung:

Timer (tritt auf, wenn der Timer abgelaufen ist). Nachteile: Das erste Mal löst nicht aus, das letzte Mal ist verzögert

Hiermit wird ein Timer eingestellt. Wenn Sie weiterklicken, wird der Timer gelöscht und das letzte Mal, wenn der Timer eingeschaltet wird

Anti-Shake-Funktion

Code:

<Text>
    <div>
        <span>Anti-Shake-Verarbeitung</span><input id="input" type="text">
        <button id="btn">Anfrage</button>
    </div>
</body>
<Skript>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000)) //Klick-Ereignis-Listener-Funktion hinzufügen output(e) {
        console.log(dies, e)
        console.log(document.getElementById("input").value) //Eine Anfrage simulieren}
    function debounce(fn, delay) { // fn ist die auszuführende Funktion, delay ist die Verzögerungszeit var time = null; // Timer return function () {
            clearTimeout(time); //Timer löschen let context = this; //Den aktuellen Schaltflächenkontext abrufen Wenn nicht angegeben, sucht die Pfeilfunktion immer nach dem Fenster
            lass args = Argumente;
            Zeit = setzeTimeout(() => {
                fn.apply(Kontext, Argumente);
            }, Verzögerung);
        }
    }
</Skript>

Wirkung:

Verbesserte Version mit Anti-Shake-Funktion

Erster Trigger und letzter verzögerter Trigger

Code:

    function throttle(fn, delay) { // fn ist die auszuführende Funktion, delay ist die Verzögerungszeit let time = null
        let flag=true //Ist dies das erste Mal, dass die return-Funktion () ausgelöst wird {
            clearTimeout(Zeit)
            wenn (Flagge) { 
                fn.apply(diese, Argumente)
                Flagge=false
            }
            Zeit = setTimeout(() => { //Timer auslösen fn.apply(this, arguments)
                Flagge = wahr
            }, Verzögerung)
        }
    }

Wirkung:

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!