So verwenden Sie die Debouce-Anti-Shake-Funktion in Vue

1. Anti-Shake-Funktion

Unter der Annahme, dass das Intervall zwischen zwei Ajax-Kommunikationen nicht weniger als 2500 Millisekunden betragen darf, kann der obige Code wie folgt umgeschrieben werden.

$('textarea').on('keydown', entprellung(ajaxAction, 2500));

Funktion Entprellung(fn, Verzögerung){
  var Timer = null; // Timer deklarieren return function() {
    var Kontext = dies;
    var args = Argumente;
    Zeitüberschreitung löschen(Timer);
    Timer = setzeTimeout(Funktion () {
      fn.apply(Kontext, Argumente);
    }, Verzögerung);
  };
}

Im obigen Code wird der vorherige Timer abgebrochen und ein neuer Timer erstellt, sobald der Benutzer die Taste innerhalb von 2500 Millisekunden erneut drückt. Dadurch wird sichergestellt, dass das Intervall zwischen den Aufrufen der Callback-Funktion mindestens 2500 Millisekunden beträgt.

2. Verwenden Sie die Debouce-Anti-Shake-Funktion in Vue

Erstellt eine debounced Funktion, die func nach einer Verzögerung von wait-Millisekunden seit dem letzten Aufruf aufruft. Die Entprellungsfunktion bietet eine Abbruchmethode zum Abbrechen des verzögerten Funktionsaufrufs und eine flush zum sofortigen Aufrufen. Sie können ein options angeben, um zu bestimmen, wie die Func-Methode aufgerufen wird, options.leading und | oder options.trailing, um zu bestimmen, wie vor und nach der Verzögerung ausgelöst wird

(Hinweis: ob erst anrufen und dann warten oder erst warten und dann anrufen).

Wenn func aufgerufen wird, werden die Argumente übergeben, die zuletzt der debounced Funktion bereitgestellt wurden. Nachfolgende Aufrufe der debounced Funktion geben das Ergebnis des letzten Aufrufs von func zurück.

Lodash-Debouce-Parameter:

• func (Function) : Die zu entprellende Funktion.
• [wait=0] (number) : Die Anzahl der Millisekunden, die verzögert werden soll.
• [options=] (Object) : Optionsobjekt.
• [options.leading=false] (boolean) : Gibt an, dass vor Beginn der Verzögerung aufgerufen werden soll.
• [options.maxWait] (number) : Legen Sie den Maximalwert fest, um den die Funktion verzögert werden darf.
• [options.trailing=true] (boolean) : Gibt an, dass nach Ablauf der Verzögerung aufgerufen werden soll.

<Vorlage>
<el-Eingabe
    v-Modell="Wert"
    Größe="mini"
    Platzhalter="Bitte geben Sie ein.."
    löschbar
    @keydown.enter="Suche handhaben"
  ></el-Eingabe>
</Vorlage>
<Skript>
importiere _ von 'lodash'
Standard exportieren {
Daten() {
    return { Wert: '' }
},
erstellen() {
    dies.handleSearch = _.debounce(() => {
      // Liste abrufen this.getList();
    }, 300);
},
vorZerstören() {
    //Anti-Shake-Aufruf dieser Funktion abbrechen this.handleSearch.cancel();
},
}
</Skript>

Dies ist das Ende dieses Artikels zur Verwendung der Debouce-Anti-Shake-Funktion in Vue. Weitere Informationen zur Verwendung der Debouce-Anti-Shake-Funktion in Vue 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!