So verwenden Sie Anti-Shake und Throttling in Vue

Vorwort

In einem Filmprojekt möchte ich die aktuelle Position des Dropdown-Menüs in der Filmliste speichern, um zu verhindern, dass Sie die Seiten wechseln und dann wieder zur aktuellen Seite der Filmliste zurückkehren, was dazu führen würde, dass Sie zum ersten Teil der Filmdaten zurückkehren.

Zu diesem Zeitpunkt möchte ich die aktuelle Position nicht jedes Mal speichern, wenn ich ein wenig schiebe. Ich möchte sie einmal in einem bestimmten Zeitraum speichern. Zu diesem Zeitpunkt kann ich Anti-Shake und Throttling verwenden.

Konzept

Vereinfacht ausgedrückt bedeutet Anti-Shake-Drosselung, dass wir zum Erreichen unseres Ziels einen Timer verwenden.

Entprellen:

Der Callback wird n Sekunden nach Auslösen des Ereignisses ausgeführt. Wird er innerhalb von n Sekunden erneut ausgelöst, wird die Zeitmessung neu gestartet.

Ein typisches Beispiel ist die Suche in Eingabefeldern: Die Suchanfrage wird n Sekunden nach Abschluss der Eingabe gestellt und die Zeit wird zurückgesetzt, wenn innerhalb von n Sekunden weiterer Inhalt eingegeben wird.

Gaspedal:

Es ist festgelegt, dass eine Funktion innerhalb einer Zeiteinheit nur einmal ausgelöst werden kann. Wird eine Funktion innerhalb dieser Zeiteinheit mehrmals ausgelöst, wird nur eines davon wirksam.

Ein typischer Fall ist, dass zum Auslösen kontinuierlich mit der Maus geklickt wird und festgelegt ist, dass mehrere Klicks innerhalb von n Sekunden nur einmal wirksam werden.

Stabilisierung

Definition

Häufige Operationen verhindern Jitter. Wenn innerhalb von n Sekunden nach der Operation keine Operation ausgeführt wird, wird das Ereignis ausgelöst. Wenn die Operation fortgesetzt wird, wird die Zeit zurückgesetzt.

Anwendungsszenarien

• Eingabefeld Eingabe
• Größe ändern

Code

// utils.js
// immediate: ob die Ausführung der Funktion sofort gestartet werden soll debounce(func, delay = 300, immediate = false) {
    let timer = null
    return Funktion() {
        wenn (Zeitgeber) {
            Zeitüberschreitung löschen(Timer)
        }
        wenn (sofort && !timer) {
            func.apply(diese, Argumente)
        }
        Timer = setzeTimeout(() => {
         func.apply(diese, Argumente)
        }, Verzögerung)
    }
}

Verwendung in Vue

Methode 1: Schreiben Sie es in die öffentlichen Methoden-Utils und führen Sie es ein

importiere { Entprellung } von 'utils'
Methoden: {
    appSearch:Entprellung(Funktion(e.Ziel.Wert){
        this.handleSearch(Wert)
    }, 1000),
    handleSearch(Wert) {
        console.log(Wert)
    }
}

Methode 2: In die aktuelle Vue-Datei schreiben

Daten: () => {
  zurückkehren {
    debounceInput: () => {}
  }
},
Methoden: {
  zeigeApp(Wert) {
    console.log('Wert', Wert)
  },
  Entprellung(Funktion, Verzögerung = 300, sofort = falsch) {
    let timer = null
    return Funktion() {
        wenn (Zeitgeber) {
            Zeitüberschreitung löschen(Timer)
        }
        wenn (sofort && !timer) {
            func.apply(diese, Argumente)
        }
        Timer = setzeTimeout(() => {
         func.apply(diese, Argumente)
        }, Verzögerung)
    }
  }
},
montiert() {
  dies.debounceInput = dies.debounce(diese.showApp, 1000)      
},

Drosselung

Definition

Häufige Operationen verwässern die Ausführung der Funktion. Bei häufigen Operationen wird sie nur alle n Sekunden ausgelöst.

Anwendungsszenarien

1. Mausklick, Mausklick, Mausbewegung werden nur einmal pro Zeiteinheit ausgeführt
2. Scroll-Ereignisse, Lazy Loading, Scroll-Laden, mehr laden oder die Position der Bildlaufleiste überwachen
3. Verhindern Sie die Übermittlung von häufigen Klicks und wiederholten Formulareinreichungen

Code

// utils.js
Funktion Drosselklappe (Funktion, Verzögerung = 300) {    
    lass prev = 0
    return Funktion() {
        lass jetzt = Date.now()
        if ((jetzt - vorh.) >= Verzögerung) {
            func.apply(diese, Argumente)
            vorheriges = Datum.jetzt()
        }
    }
}

Verwendung in Vue

Die Verwendung ist die gleiche wie bei Anti-Shake

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Anti-Shake und Throttling in Vue. Weitere relevante Inhalte zur Verwendung von Vue 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!