Vues Leitfaden zu Fallstricken bei der Verwendung von Drosselungsfunktionen

    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

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);
        };
   }

<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>

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)
      }
    }
  }
}

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;
};

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);
        }

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 ~

<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>

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)

<===>