Unterschied zwischen Drosselung und Entprellung einer Funktion

Question

Kann mir jemand eine einfache Erklärung über den Unterschied zwischen Throttling und Debouncing einer Funktion für Zwecke der Rate-Begrenzung geben?

Für mich scheinen beide dasselbe zu tun. Ich habe diese zwei Blogs überprüft, um herauszufinden, aber ich habe immer noch Schwierigkeiten zu verstehen.

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Answer 1

Das Zusammenführen von Debounce und Throttle kann sehr verwirrend sein, da sie beide einen Parameter namens delay teilen.

Debounce. Das delay ist darauf ausgelegt zu warten, bis keine weiteren Aufrufe mehr erfolgen, um es dann aufzurufen. Ähnlich wie das schließen einer Aufzugstür: Die Tür muss warten, bis niemand mehr versucht einzusteigen, bevor sie sich schließt.

Throttle. Das delay besteht darin, mit einer Frequenz zu warten und dann für den letzten Aufruf zu sorgen. Ähnlich wie beim Abfeuern einer Pistole, die Waffe kann einfach nicht über eine bestimmte Rate hinaus abgefeuert werden.

---

Lassen Sie uns die Implementierung im Detail betrachten.

function debounce(fn, delay) {
  let handle = null

  return function () {
    if (handle) {
      handle = clearTimeout(handle)
    }

    handle = setTimeout(() => {
      fn(...arguments)
    }, delay)
  }
}

Debounce unterbricht ständig den Timeout, bis keine Unterbrechungen mehr erfolgen, und ruft dann fn auf.

function throttle(fn, delay) {
  let handle = null
  let prevArgs = undefined

  return function() {
    prevArgs = arguments
    if (!handle) {
      fn(...prevArgs)
      prevArgs = null
      handle = setInterval(() => {
        if (!prevArgs) {
          handle = clearInterval(handle)
        } else {
          fn(...prevArgs)
          prevArgs = null
        }
      }, delay)
    }
  }
}

Throttle speichert die Argumente des letzten Aufrufs und richtet ein Intervall ein, um solange zu feuern, bis keine vergangenen Feuer mehr vorhanden sind.

Ähnlichkeiten. Sie haben beide eine Verzögerungszeit, und es erfolgt kein Feuer während der Verzögerung, insbesondere wenn es nur ein Feuer gibt. Beide aggregieren keine vergangenen Ereignisse, daher kann die Anzahl der Ereignisse von den tatsächlichen Feuern abweichen.

Unterschied. Die Verzögerung kann im Fall von Debounce bei wiederholten Ereignissen verlängert werden. Während die Verzögerung im Fall von Throttle fest ist. Insgesamt erhält man also mehr Feuer von Throttle als von Debounce.

Leicht zu merken. Debounce gruppiert Anrufe zu einem Bündel. Throttle hält Bündelanrufe innerhalb einer bestimmten Frequenz aufrecht.

Aktualisiert am 1-20-23

Throttle benötigt möglicherweise kein setInterval, hier ist eine neue Version, die ich kürzlich geschrieben habe und sich auch um this kümmert.

function throttle(fn, delay) {
  let canFire = true
  let queue = []

  function pop() {
    if (queue.length < 1) return 

    const [that, args] = queue.pop()
    fn.apply(that, args)
    canFire = false
    setTimeout(() => {
      canFire = true
      pop()
    }, delay)
  }

  function push() {
    queue.push([this, arguments])
    if (canFire) pop()
  } 

  push.cancel = () => {
    queue = []
  }

  return push
}

Aktualisiert am 11-09-23

Ich beginne zu glauben, dass Throttle ein Add-On auf Debounce ist. Lesen Sie dies https://windmaomao.medium.com/throttle-is-a-debounce-add-on-80d4a6027ad4.

function throttle(fn, delay) {
  let h
  let queue = []

  function pop() {
    if (queue.length < 1) return 

    if (!h) {
      const [that, args] = queue.pop()
      fn.apply(that, args) 

      h = setTimeout(() => {
        h = null
        pop()
      }, delay)      
    }      
  }

  return function push() {
    queue.push([this, arguments])
    pop()
  } 
}

Answer 2

Drosselung

Drosselung legt eine maximale Anzahl von Aufrufen einer Funktion fest über die Zeit. Zum Beispiel "Führe diese Funktion höchstens einmal alle 100 Millisekunden aus". Angenommen, unter normalen Umständen würden Sie diese Funktion 1.000 Mal über 10 Sekunden aufrufen. Wenn Sie sie jedoch auf nur einmal alle 100 Millisekunden drosseln, würde diese Funktion höchstens 100 Mal ausgeführt werden

(10s * 1,000) = 10,000ms
10,000ms / 100ms Drosselung = 100 maximale Aufrufe

Entprellen

Entprellen stellt sicher, dass eine Funktion nicht erneut aufgerufen wird, bis eine bestimmte Zeit vergangen ist, ohne dass sie aufgerufen wurde. Zum Beispiel "Führe diese Funktion nur aus, wenn 100 Millisekunden vergangen sind, ohne dass sie aufgerufen wurde."

Vielleicht wird eine Funktion 1.000 Mal in einem schnellen Schub aufgerufen, über 3 Sekunden verteilt, und hört dann auf aufgerufen zu werden. Wenn Sie es auf 100 Millisekunden entprellen, wird die Funktion nur einmal ausgeführt, nach 3,1 Sekunden, wenn der Schub vorbei ist. Jedes Mal, wenn die Funktion während des Schubs aufgerufen wird, wird der Entprellungs-Timer zurückgesetzt

Quelle: Drosselung und Entprellen

Answer 3

Angenommen, wir haben eine Rückruffunktion "cb", die bei Ereignis "E" aufgerufen werden soll. Wenn "E" in 1 Sekunde 1000 Mal ausgelöst wird, gibt es also 1000 Aufrufe von "cb". Das sind 1 Aufruf/ms. Zur Optimierung können wir entweder Folgendes verwenden:

• Throttling: Mit einer Drosselung von (100 ms) wird "cb" auf [100. ms, 200. ms, 300. ms, ... 1000. ms] aufgerufen. Das sind 1 Aufruf/100 ms. Hier werden 1000 Aufrufe von "cb" auf 10 Aufrufe optimiert.
• Debouncing: Mit einer Entprellung von (100 ms) wird "cb" nur einmal auf [1100. ms] aufgerufen. Das sind 100 ms nach dem letzten Auslösen von "E", das am [1000. ms] stattfand. Hier werden 1000 Aufrufe von "cb" auf 1 Aufruf optimiert.

Answer 4

Throtle ist nur ein Wrapper um Debounce, der Debounce dazu bringt, die übergebene Funktion in einem bestimmten Zeitraum aufzurufen, wenn Debounce einen Funktionsaufruf um einen Zeitraum verzögert, der größer ist als in Throtle spezifiziert.

Answer 5

Die lodash-Bibliothek schlägt den folgenden Artikel vor https://css-tricks.com/debouncing-throttling-explained-examples/, der den Unterschied zwischen Debounce und Throttle und ihre Herkunft detailliert erklärt