Vues Leitfaden zu Fallstricken bei der Verwendung von Drosselungsfunktionen

Vues Leitfaden zu Fallstricken bei der Verwendung von Drosselungsfunktionen

Vorwort

In einem üblichen Geschäftsszenario müssen wir nach Abschluss der Eingabe im Suchfeld eine entsprechende Anfrage senden, um Suchdaten abzurufen. Häufiges Auslösen von Ereignissen führt zu zu häufigen Schnittstellenanforderungen. Daher müssen wir dies einschränken, um unnötige Anfragen zu verhindern und eine Verschwendung von Ressourcen zu vermeiden ~

Nehmen Sie ein Geschäftsszenario

Konzept:

Einführung in die Anti-Shake-Funktion

Über addEventListener

Anwendungsbeispiel:

    Funktion Entprellung(fn) {
        let timeout = null; //Erstelle einen Marker, um den Rückgabewert des Timers zu speichern return function () {
            clearTimeout(timeout); // Lösche das vorherige setTimeout jedes Mal, wenn der Benutzer eine Eingabe macht timeout = setTimeout(() => {
                // Erstellen Sie dann ein neues setTimeout, sodass die fn-Funktion nicht ausgeführt wird, wenn innerhalb des Intervalls nach dem Eingabezeichen weitere Eingaben erfolgen. fn.apply(this, arguments);
            }, 500);
        };
    }
    Funktion sagHallo() {
        console.log('Anti-Shake erfolgreich');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // Anti-Shake

In Vue verwenden?

Lassen Sie mich zunächst über meine bisherigen Fallstricke sprechen.

Der folgende Code ist eine vereinfachte Version einer Szene

Funktion Entprellung(fn) {
        let timeout = null; //Erstelle einen Marker, um den Rückgabewert des Timers zu speichern return function () {
            clearTimeout(timeout); // Lösche das vorherige setTimeout jedes Mal, wenn der Benutzer eine Eingabe macht timeout = setTimeout(() => {
                // Erstellen Sie dann ein neues setTimeout, sodass die fn-Funktion nicht ausgeführt wird, wenn innerhalb des Intervalls nach dem Eingabezeichen weitere Eingaben erfolgen. fn.apply(this, arguments);
            }, 500);
        };
   }

Falsche Verwendung

<Vorlage>
    <div Klasse="Suchansicht">
        <div Klasse="Header">
            <Suche 
                Klasse="Suchfeld" 
                v-Modell = "Suchwert" 
                @input = "Suchergebnis abrufen" 
                Platzhalter = 'Suchen Sie nach den guten Sachen, die Sie wollen' />
            <span @click="goBack" class="cancel">Abbrechen</span>
        </div>
        <div Klasse="Suche-Inhalt anzeigen" />
    </div>

</Vorlage>

<Skript>
Suche aus „./components/Search“ importieren;
Entprellung aus „./config“ importieren;

Standard exportieren {
    Name: "Suchansicht",
    Komponenten:
        Suchen
    },
    Daten() {
        zurückkehren {
            Suchwert: ''
        };
    },
    Methoden: {
        getSearchResult() {
            Entprellung(Funktion() {
                Konsole.log(dieser.Suchwert);
            })();
        }
    }
};
</Skript>

Warum ist es falsch?

Analyse auf Quellcodeebene

Analyseereignis für die Vue-Vorlagenkompilierung

exportiere const onRE = /^@|^v-on:/
export const dirRE = /^v-|^@|^:/

Funktion Prozessattribute(el) {
  const list = el.attrsList
  let i, l, Name, Wert, Modifikatoren
  für (i = 0, l = Listenlänge; i < l; i++) {
    Name = Liste[i].Name
    Wert = Liste[i].Wert
    wenn (dirRE.test(name)) {
      // Modifikatoren analysieren modifiers = parseModifiers(Name)
      if (Modifikatoren) {
        Name = Name.Ersetzen(ModifikatorRE, '')
      }
      wenn (onRE.test(name)) { // v-on
        Name = Name.Ersetzen(onRE, '')
        addHandler(el, Name, Wert, Modifikatoren, false, warnen)
      }
    }
  }
}

Zusammenfassung: Die während der Initialisierungsphase der Instanz aufgerufene Initialisierungsereignisfunktion initEvents initialisiert tatsächlich die Ereignisse, die in der von der übergeordneten Komponente registrierten Listener-Unterkomponente ausgelöst werden, indem in der Vorlage v-on oder @ verwendet wird.

Der Ereignismechanismus von Vue

Vue.prototype.$on = Funktion(Ereignis, fn) {
    const vm = dies;
    wenn (Array.isArray(Ereignis)) {
        für (lass i = 0; i < Ereignislänge; i++) {
            dies.$on(Ereignis[i], fn);
        }
    } anders {
        //Dieses _events-Attribut wird als Ereigniscenter der aktuellen Instanz verwendet. Alle an diese Instanz gebundenen Ereignisse werden im _events-Attribut des Ereigniscenters gespeichert.
        (vm._events[Ereignis] || (vm._events[Ereignis] = [])).push(fn);
    }
    gib vm zurück;
};

Vue.prototype.$emit = Funktion(Ereignis) {
    const vm = dies;
    lass cbs = vm._events[Ereignis];
    wenn (cbs) {
        cbs = cbs.Länge > 1 ? toArray(cbs) : cbs;
        let args = toArray(Argumente, 1);
        für (lass i = 0; i < cbs.Länge; i++) {
            versuchen {
                cbs[i].apply(vm, args);
            } fangen (e) {
                handleError(e, vm, `Ereignishandler für "${event}"`);
            }
        }
    }
    gib vm zurück;
};

Die Methode initMethods wird im initState von vue aufgerufen

Hängen Sie in initMethods die Methodenmethode an diese

für (const Schlüssel in Methoden) {
        wenn (Prozess.Umgebung.NODE_ENV !== 'Produktion') {
            wenn (Methoden[Schlüssel] == null) {
                warnen(
                    `Methode "${key}" hat einen undefinierten Wert in der Komponentendefinition. ` +
                        `Haben Sie die Funktion richtig referenziert?`,
                    vm
                );
            }
            // Wenn der Name mit einem Eigenschaftsnamen in den Props identisch ist, wird eine Ausnahme ausgelöst, if (props && hasOwn(props, key)) {
                warnen(`Methode "${key}" wurde bereits als Eigenschaft definiert.`, vm);
            }
            /*
            Wenn ein Methodenname in Methoden bereits in der Instanz-VM vorhanden ist und der Methodenname mit _ oder $ beginnt, wird eine Exception ausgelöst:
            Weisen Sie den Benutzer darauf hin, dass der Methodenname nicht standardisiert ist*/
            wenn (Schlüssel in vm && isReserved(Schlüssel)) {
                warnen(
                    `Methode "${key}" steht im Konflikt mit einer vorhandenen Vue-Instanzmethode. ` +
                        `Vermeiden Sie die Definition von Komponentenmethoden, die mit _ oder $ beginnen.`
                );
            }
            // Binden Sie die Methode an die Instanz-VM, damit wir über this.xxx darauf zugreifen können. // Gleichzeitig zeigt this, wenn let m1 = this.xxx m1() in vue, auch auf vue.
            vm[Schlüssel] = Methoden[Schlüssel] == null ? noop : binden(Methoden[Schlüssel], vm);
        }

Wichtige Punkte:

  • Unterkomponente $emit('Eingabeereignis')
  • Übergeordnete Komponente empfängt Ereignisse
getSearchResult.apply(dies, agrs)
<===> Der Aufruf von apply kann wie folgt geschrieben werden this.getSearchResult(args)

// Und dann wird es zu dieser Ausführung debounce(function() {
      Konsole.log(dieser.Suchwert);
})();

// Hier gibt Debounce eine Funktion zurück, sodass sie zu (function (fn) { wird.
      clearTimeout(timeout); // Lösche das vorherige setTimeout jedes Mal, wenn der Benutzer eine Eingabe macht timeout = setTimeout(() => {
          // Erstellen Sie dann ein neues setTimeout, sodass die fn-Funktion nicht ausgeführt wird, wenn innerhalb des Intervalls nach dem Eingabezeichen weitere Eingaben erfolgen. fn.apply(this, arguments);
      }, 500);
})()
// An diesem Punkt wird es tatsächlich zur Selbstausführung der anonymen Funktion // Da bei jeder Auslösung der Eingabe eine neue anonyme Funktion zurückgegeben wird, um einen neuen Funktionsausführungsstapel zu generieren, schlägt die Anti-Shake-Funktion fehl ~

Wie sollen wir also anrufen

<Vorlage>
    <div Klasse="Suchansicht">
        <div Klasse="Header">
            <Suche
                Klasse="Suchfeld"
                v-Modell = "Suchwert"
                @input = "getSearchResult()"
                Platzhalter = 'Suchen Sie nach den guten Sachen, die Sie wollen'
            />
            <span
                @click="Zurück"
                class="cancel">Abbrechen</span>
        </div>
        <div Klasse="Suche-Inhalt anzeigen">
            
        </div>
    </div>

</Vorlage>

<Skript>
Entprellung von „lodash.debounce“ importieren;
Standard exportieren {
    Name: "Suchansicht",
    Komponenten:
        Suchen,
    },
    Daten() {
        zurückkehren {
            Suchwert: '',
        };
    },
    Methoden: {
        getSearchResult:debounce(Funktion () {
            Konsole.log(dieser.Suchwert);
        }, 500),
    },

};
</Skript>

Analysieren Sie den Ausführungsprozess

getSearchResult().apply(diese, Argumente)
<===> Parameterverhalten ignorieren und sich nur auf den Ausführungsstapel konzentrieren let func = function () {
    clearTimeout(timeout); // Lösche das vorherige setTimeout jedes Mal, wenn der Benutzer eine Eingabe macht timeout = setTimeout(() => {
        // Erstellen Sie dann ein neues setTimeout, sodass die fn-Funktion nicht ausgeführt wird, wenn innerhalb des Intervalls nach dem Eingabezeichen weitere Eingaben erfolgen. fn.apply(this, arguments);
    }, 500);
};

diese.funktion(args)

<===>

Das Verhalten der Unterkomponente, die die Eingabe auslöst, gibt immer denselben Funktionskörper zurück. Anti-Shake ist erfolgreich.

Ähnlich wie addEventListener, das am Anfang des Artikels vorgestellt wurde

Zusammenfassen

Dies ist das Ende dieses Artikels über die Fallstricke bei der Verwendung von Drosselungsfunktionen in Vue. Weitere relevante Inhalte zu den Fallstricken bei der Verwendung von Drosselungsfunktionen in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Eine kurze Diskussion über die beste Lösung für VUE Anti-Shake und Throttling (funktionale Komponenten)
  • Beispiel für die Kapselung von Drosselungsfunktionen mithilfe von benutzerdefinierten Vue-Direktiven
  • Vue implementiert den Beispielcode der Fuzzy-Abfrage des Eingabefelds (Anwendungsszenario der Drosselungsfunktion).
  • Verständnis und Anwendung der Funktion Anti-Shake-Throttling in Vue
  • Ursachen und Lösungen für den Ausfall der Drosselungsfunktion in Vue-Komponenten

<<:  CentOS 7 SSHD ändern | Root-Login und SSHD-Port-Skriptdefinition verbieten

>>:  Beispielcode für MySQL-Datensicherung und -wiederherstellung

Artikel empfehlen

Detailliertes Beispiel für die Blockierung von Flash durch HTML-Elemente

Code kopieren Der Code lautet wie folgt: wmode-Pa...

Detaillierte Erklärung zur Verwendung von $props, $attrs und $listeners in Vue

Inhaltsverzeichnis Hintergrund 1. Dokumentbeschre...

Mehrere praktische Szenarien zur Implementierung der Ersetzungsfunktion in MySQL

REPLACE Syntax REPLACE(String,from_str,to_str) Da...

Webdesign: Implementierungstechniken für Webmusik

<br />Wenn Sie Musik in eine Webseite einfüg...

Detaillierte Analyse des Linux-Kernel-Makros container_of

1. Wie oben erwähnt Ich habe dieses Makro gesehen...

Vue+el-table realisiert das Zusammenführen von Zellen

In diesem Artikelbeispiel wird der spezifische Co...

Analyse des Prinzips und der Verwendung von MySQL-Benutzerdefinierten Funktionen

Dieser Artikel veranschaulicht anhand von Beispie...

IE8 verwendet den Multikompatibilitätsmodus, um Webseiten normal anzuzeigen

IE8 wird mehrere Kompatibilitätsmodi haben. Der IE...

Lehr- oder Lernprogramm für Webdesign

Abschnitt Studieninhalte Std 1 Webdesign-Übersich...

Eine einfache Möglichkeit zum Erstellen einer Docker-Umgebung

Lassen Sie uns zunächst verstehen, was Docker ist...