Vue2.x - Beispiel für die Verwendung von Anti-Shake und Throttling

// Anti-Shake-Export const debounce = (func, wait = 3000, immediate = true) => {
 lass timeout = null;
 return Funktion() {
  lass Kontext = dies;
  lass args = Argumente;
  wenn (Zeitüberschreitung) Zeitüberschreitung löschen (Zeitüberschreitung);
  wenn (sofort) {
   var callNow = !timeout; //Der erste Klick ist true, der zweite Klick innerhalb der Zeit ist false und der erste Klick wird wiederholt, wenn die Zeit abgelaufen ist timeout = setTimeout(() => {
    Zeitüberschreitung = null;
   }, warten); //Timer-ID
   wenn (Jetzt anrufen) func.apply(Kontext, Argumente);
  } anders {
   Zeitüberschreitung = Zeitüberschreitung festlegen (Funktion () {
    func.apply(Kontext, Argumente);
   }, Warten);
  }
 };
};
// Zeitstempelschema export const throttleTime = (fn, wait = 2000) => {
 var pre = Date.now();
 return Funktion() {
  var Kontext = dies;
  var args = Argumente;
  var jetzt = Date.jetzt();
  wenn (jetzt - vor >= warten) {
   fn.apply(Kontext, Argumente);
   vor = Date.now();
  }
 };
};
// Timer-Lösung export const throttleSetTimeout = (fn, wait = 3000) => {
 var Timer = null;
 return Funktion() {
  var Kontext = dies;
  var args = Argumente;
  wenn (!timer) {
   Timer = setzeTimeout(Funktion() {
    fn.apply(Kontext, Argumente);
    Zeitgeber = null;
   }, Warten);
  }
 };
};

<Vorlage>
 <div Klasse="Haupt">
  <p>Anti-Shake wird sofort ausgeführt</p>
  <button @click="click1">Klick</button>

  <br />

  <p>Anti-Shake wird nicht sofort ausgeführt</p>
  <button @click="click2">Klick</button>

  <br />

  <p>Drosselungs-Zeitstempelschema</p>
  <button @click="click3">Klick</button>

  <br />

  <p>Drosselungstimer-Lösung</p>
  <button @click="click4">Klick</button>
 </div>
</Vorlage>

<Skript>
importiere { Entprellung, Drosselzeit, Drosselzeitsettimeout } aus './utils';
Standard exportieren {
 Methoden: {
  Klick1: Entprellung(
   Funktion() {
    console.log('Anti-Shake wird sofort ausgeführt');
   },
   2000,
   WAHR
  ),
  Klick2: Entprellung(
   Funktion() {
    console.log('Anti-Shake wird nicht sofort ausgeführt');
   },
   2000,
   FALSCH
  ),
  Klick3: Drosselzeit(Funktion() {
   console.log('Drosselungs-Zeitstempelschema');
  }),
  Klick4: DrosselklappenTimeoutSetzen(Funktion() {
   console.log('Drosselungs-Timer-Schema');
  })
 },
};
</Skript>

<style scoped lang="scss">
* {
 Rand: 0;
 Schriftgröße: 20px;
 Benutzerauswahl: keine;
}
.hauptsächlich {
 Position: absolut;
 links: 50%;
 transformieren: übersetzenX(-50%);
 Breite: 500px;
}
Taste {
 Rand unten: 100px;
}
</Stil>