Erläuterung zu JavaScript-Anti-Shake und -Throttling

<Text>
  <button id="btn">Klick</button>
</body>
<Skript>
  const btn = document.getElementById('btn')
  Funktion zahleGeld() {
    console.log('Geld bezahlen');
  }
  btn.addEventListener('klicken', Geld bezahlen)
</Skript>

const btn = document.getElementById('btn')
Funktion zahleGeld() {
  console.log('Geld bezahlen');
}
Funktion Entprellung(Funktion) {
  //Gibt die Funktion in der Funktion zurück, gibt die Funktion nur zurück, wenn geklickt wird return function () {
    Funktion()
  }
}
btn.addEventListener('klicken', entprellen(Geld bezahlen))

const btn = document.getElementById('btn')
Funktion zahleGeld() {
  console.log('Geld bezahlen');
}
Funktion Entprellung(Funktion, Verzögerung) {
  Rückgabefunktion () {
    setTimeout(_ => func(), Verzögerung)
  }
}
btn.addEventListener('klicken', entprellen(Geld zahlen, 1000))

const btn = document.getElementById('btn')
Funktion zahleGeld() {
  console.log('Geld bezahlen');
}
Funktion Entprellung(Funktion, Verzögerung) {
  Rückgabefunktion () {
    Timer einschalten
    Intervall löschen(Timer)
    Timer = setTimeout(_ => func(), Verzögerung)
  }
}
btn.addEventListener('klicken', entprellen(Geld zahlen, 1000))

const btn = document.getElementById('btn')
Funktion zahleGeld() {
  console.log('Geld bezahlen');
}
Funktion Entprellung(Funktion, Verzögerung) {
  Timer einschalten
  Rückgabefunktion () {
    Intervall löschen(Timer)
    Timer = setTimeout(_ => func(), Verzögerung)
  }
}
btn.addEventListener('klicken', entprellen(Geld zahlen, 1000))

const btn = document.getElementById('btn')
Funktion zahleGeld() {
  console.log('Geld bezahlen');
  konsole.log(dies);
}
Funktion Entprellung(Funktion, Verzögerung) {
  Timer einschalten
  Rückgabefunktion () {
    Intervall löschen(Timer)
    Timer = setTimeout(_ => func(), Verzögerung)
  }
}
btn.addEventListener('klicken', entprellen(Geld zahlen, 1000))

const btn = document.getElementById('btn')
Funktion zahleGeld() {
  console.log('Geld bezahlen');
  konsole.log(dies);
}
Funktion Entprellung(Funktion, Verzögerung) {
  Timer einschalten
  // Diese Funktion wird nur zurückgegeben, wenn sie angeklickt wird. Dies ist also die Rückgabefunktion (), die auf die Schaltfläche { zeigt.
    lass Kontext = dies
    Intervall löschen(Timer)
    Timer = setzeTimeout(_ => {
      Funktion.apply(Kontext)
    }, Verzögerung)
  }
}
btn.addEventListener('klicken', entprellen(Geld zahlen, 1000))

const btn = document.getElementById('btn')
Funktion zahleGeld() {
  console.log('Geld bezahlen');
  konsole.log(dies);
}
Funktion Entprellung(Funktion, Verzögerung) {
  Timer einschalten
  Rückgabefunktion () {
    lass Kontext = dies
    let args = Argumente
    Intervall löschen(Timer)
    Timer = setzeTimeout(_ => {
      Funktion.apply(Kontext)
      Konsole.log(Kontext, Argumente);
    }, Verzögerung)
  }
}
btn.addEventListener('klicken', entprellen(Geld zahlen, 1000))

Funktion Färbung() {
  sei r = Math.floor(Math.random() * 255)
  sei g = Math.floor(Math.random() * 255)
  sei b = Math.floor(Math.random() * 255)
  Dokument.Body.Style.Background = `rgb(${r}, ${g}, ${b})`
}
window.addEventListener('Größe ändern', Färbung)

Funktion Drosselklappe(Funktion, Verzögerung) {
  Timer einschalten
  Rückgabefunktion () {
    Timer = setzeTimeout(_ => {
      Funktion()
    }, Verzögerung)
  }
}
window.addEventListener('Größe ändern', Drosselung(Färbung, 2000))

Funktion Drosselklappe(Funktion, Verzögerung) {
  Timer einschalten
  Rückgabefunktion () {
    // Dem Timer wird ein Wert zugewiesen. Gib ihn direkt zurück, d. h. führe die Aufgabe nicht aus, wenn (Timer) {
      zurückkehren
    }
    // Zu diesem Zeitpunkt wurde dem Timer noch kein Wert zugewiesen oder der Timer wurde ausgeführt // Weisen Sie dem Timer einen Wert für die verzögerte Ausführung zu timer = setTimeout(_ => {
      Funktion()
      // Nach der Verzögerungsausführung müssen wir den Wert des Timers löschen timer = null
    }, Verzögerung)
  }
}
window.addEventListener('Größe ändern', Drosselung(Färbung, 2000))

Funktion Drosselklappe(Funktion, Verzögerung) {
  Timer einschalten
  Rückgabefunktion () {
    lass Kontext = dies
    let args = Argumente
    // Dem Timer wird ein Wert zugewiesen. Gib ihn direkt zurück, d. h. führe die Aufgabe nicht aus, wenn (Timer) {
      zurückkehren
    }
    // Zu diesem Zeitpunkt wurde dem Timer noch kein Wert zugewiesen oder der Timer wurde ausgeführt // Weisen Sie dem Timer einen Wert für die verzögerte Ausführung zu timer = setTimeout(_ => {
      func.apply(Kontext, Argumente)
      // Nach der Verzögerungsausführung müssen wir den Wert des Timers löschen timer = null
    }, Verzögerung)
  }
}
window.addEventListener('Größe ändern', Drosselung(Färbung, 1000))

Funktion Drosselklappe(Funktion, Verzögerung) {
  // Wir müssen mit dem vorherigen Zeitpunkt vergleichen, um festzustellen, ob das Zeitintervall abgelaufen ist. // Außerhalb der Rückgabefunktion, um eine automatische Änderung bei jeder Ausführung zu vermeiden. let pre = 0
  Rückgabefunktion () {
    //Speichern Sie die Zeit, zu der die Funktion ausgeführt wird let now = new Date()
    // Zu Beginn wird es auf jeden Fall ausgeführt, wenn (now - pre > delay) {
      // Das Zeitintervall ist abgelaufen und die Funktion kann ausgeführt werden func()
      // Nach der Ausführung den Intervallpunkt zurücksetzen pre = now
    }
  }
}
window.addEventListener('Größe ändern', Drosselung(Färbung, 1000))

Funktion Drosselklappe(Funktion, Verzögerung) {
  sei pre = 0
  Rückgabefunktion () {
    lass Kontext = dies
    let args = Argumente
    lass jetzt = neues Datum()
    wenn (jetzt - vor > Verzögerung) {
      func.apply(Kontext, Argumente)
      vor = jetzt
    }
  }
}
window.addEventListener('Größe ändern', Drosselung(Färbung, 1000))