Richtige Verwendung der Vue-Funktion Anti-Shake und Throttling

Vorwort

1. Entprellen: Nach dem Auslösen eines Hochfrequenzereignisses wird die Funktion nur einmal innerhalb von n Sekunden ausgeführt. Wenn das Hochfrequenzereignis innerhalb von n Sekunden erneut ausgelöst wird, wird die Zeit neu berechnet.

Beispiel: Genau wie bei der Suche auf Baidu werden nach jeder Eingabe verknüpfte Wörter angezeigt. Diese Methode zur Steuerung der verknüpften Wörter kann nicht ausgelöst werden, sobald sich der Inhalt des Eingabefelds ändert. Sie muss nach einer gewissen Zeit nach Abschluss der Eingabe ausgelöst werden.

Drosselung: Hochfrequente Ereignisse werden ausgelöst, aber nur einmal innerhalb von n Sekunden ausgeführt, sodass die Drosselung die Ausführungsfrequenz der Funktion verringert.

Beispiel: Die Ausführung einer Funktion ist nur dann geplant, wenn sie größer oder gleich dem Ausführungszyklus ist. Wenn sie während des Zyklus aufgerufen wird, wird sie nicht ausgeführt. Es ist, als ob Sie versuchen, einen Bestseller in limitierter Auflage auf Taobao zu kaufen. Sie klicken immer wieder auf die Schaltfläche „Aktualisieren“, um zu kaufen, aber irgendwann funktioniert es nicht mehr. Hier kommt die Drosselung ins Spiel, weil Sie befürchten, dass zu schnelles Klicken einen Fehler im System verursacht.

2. Unterschied: Anti-Shake besteht darin, mehrere Ausführungen in die letzte Ausführung umzuwandeln, und Throttling besteht darin, mehrere Ausführungen in Ausführungen in Intervallen umzuwandeln.

Die Funktionen Anti-Shake und Throttling sind immer wieder Interviewthemen. Jeder ist möglicherweise mit dem Schreiben der Funktion „Anti-Shake“ und „Throttling“ vertraut, aber bei der Verwendung der Funktion „Anti-Shake“ oder „Throttling“ in Vue gibt es eine kleine Episode.

Richtige Nutzungshaltung in Vue

Ich glaube, dass viele Leute die Funktion direkt definieren und dann Debounce in der Funktion verwenden . Das ist die falsche Art, es zu verwenden.

Warum? Dies hängt mit dem Ereignisbindungsprinzip von Vue zusammen, das hier nicht im Detail vorgestellt wird. Bei direkter Verwendung innerhalb des Funktionskörpers wird im Endergebnis eine anonyme, sofort ausgeführte Funktion ausgeführt, was falsch ist. Detaillierte Referenz

Prinzip

Funktion Entrütteln

Die Funktion „Anti-Shake“ bezieht sich auf die Zeit, nach der die Funktion ausgeführt wird. Wir können uns das als ein reales Szenario vorstellen (Fahrstuhlfahren). Nachdem Sie auf die Schaltfläche zum Öffnen der Aufzugstür geklickt haben, öffnet der Aufzug die Tür und wartet dann eine Weile , bevor er die Tür schließt. Wenn jedoch während der Wartezeit erneut auf die Türöffnungstaste geklickt wird , wartet der Aufzug weiter, bis die Türschließzeit abgelaufen ist . Der Aufzug fährt erst los, wenn die Türschließzeit abgelaufen ist und niemand mehr auf die Türöffnungstaste klickt.

Code schreiben

Erste nicht sofortige Ausführung

Exportfunktion Entprellung(f, t){
    lass den Timer;
    return (...arg) => {
        Zeitüberschreitung löschen(Timer);
        Timer = setzeTimeout(() => {
            f( ...arg)
        }, T)
    }
}

Erste sofortige Ausführung

In einigen Szenarien muss ich beim ersten Mal nicht warten und muss die Ausführung sofort durchführen, z. B.: Öffnen Sie die Konsole, um die Fensteransichtsgröße abzurufen (hier müssen wir die Fenstergröße weiter ändern, warten, bis es stoppt, und die Fensteransichtsgröße erneut abrufen).

Exportfunktion debounceFirstExe(f, t){
    lass Timer, Flag = true;
    return (...args) => {
        wenn (Flagge) {
            f(...args);
            Flagge = falsch;
        }anders {
            Zeitüberschreitung löschen(Timer);
            Timer = setzeTimeout(() => {
                f(...args);
                Flagge = wahr;
            }, T)
        }
    }
}

Zusammengeführte Version

Exportfunktion Entprellung(f, t, im = false){
    lass Timer, Flag = true;
    return (...args) => {
        // Muss sofort ausgeführt werden, wenn (im){
           wenn (Flagge) {
               f(...args);
               Flagge = falsch;
           }anders {
               Zeitüberschreitung löschen(Timer);
               Timer = setzeTimeout(() => {
                   f(...args);
                   Flagge = wahr
               }, T)
           }
       }anders {
           // Nicht sofortige Ausführung clearTimeout(timer);
           Timer = setzeTimeout(() => {
               f(...args)
           }, T)
       }
    }
}

Wo können wir die Funktion Anti-Shake auf Codeebene verwenden?

Beim Senden von Netzwerkwasserstoff wie „Gefällt mir“, Verifizierung von Eingabefeldern, Abbrechen von „Gefällt mir“, Erstellen von Bestellungen usw. können mehrere Anfragen gesendet werden, wenn wir wiederholt auf die Schaltfläche klicken. Dies ist für das Backend nicht zulässig. Bei jeder Größenänderung bzw. jedem Scrollen mit der Maus wird ein Statistikereignis ausgelöst.

Funktionsdrosselung

Das Prinzip der Funktionsdrosselung ähnelt dem der Funktion Anti-Shake. Funktionsdrosselung bedeutet, dass sie innerhalb eines bestimmten Zeitraums nur einmal ausgeführt wird.

Erste nicht sofortige Ausführung

Exportfunktion Drosselklappe (f, t) {
    lass Timer = true;
    return (...arg)=>{
        wenn(!timer){
            zurückkehren;
        }
        Timer=falsch;
        setzeTimeout(()=>{
            f(...arg);
            Timer=wahr;
        },T)

    }
}

Im Effekt haben wir mehrmals geklickt, er wurde jedoch nur viermal ausgeführt, da ich die Ausführungszeit auf 1000 ms festgelegt hatte. Dadurch verringert sich auch die Anzahl der Ausführungszeiten.

Erste Version mit sofortiger Ausführung

Exportfunktion throttleFirstExt(f, t) {
    lass flag = wahr;
    return (...args) => {
        wenn (Flagge) {
            f(...args);
            Flagge = falsch;
            setzeTimeout(() => {
                Flagge = wahr
            }, T)
        }
    }
}

Hier sehen wir, dass der erste Klick sofort ausgeführt wird.

Zusammengeführte Version

Exportfunktion Drosselklappe (f, t, im = false) {
    lass flag = wahr;
    return (...args)=>{
        wenn(Flagge){
            Flagge = falsch
            im && f(...args)
            setzeTimeout(() => {
                !im && f(...args)
                Flagge = wahr
            },T)
        }
    }
}

Anwendungsszenarien:

• Implementierung der Ziehfunktion von DOM-Elementen (Mousemove)
• Suche nach Assoziation (keyup)
• Berechnen Sie die Distanz, über die sich die Maus bewegt (mousemove).
• Canvas simuliert die Zeichenbrettfunktion (Mausbewegung)
• Mousedown-/Keydown-Ereignisse in Schießspielen (pro Zeiteinheit kann nur eine Kugel abgefeuert werden)
• Achten Sie auf Bildlaufereignisse, um zu bestimmen, ob die Seite das Ende erreicht hat, und laden Sie automatisch weitere: Nach dem Hinzufügen von Debounce zum Bildlauf wird erst dann bestimmt, ob das Ende der Seite erreicht wurde, wenn der Benutzer mit dem Bildlauf aufhört. Wenn es gedrosselt wird, wird es einmal pro Zeitintervall bestimmt, solange die Seite gescrollt wird.

Zusammenfassen

Dies ist das Ende dieses Artikels über die korrekte Verwendung der Vue-Funktion Anti-Shake und Throttling. Weitere relevante Inhalte zur Vue-Funktion Anti-Shake und Throttling finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!