Wie implementiert man eine einfache Drosselfunktion in JavaScript ohne externe Bibliotheken?

Einfache Drosselung in JavaScript ohne externe Bibliotheken

Einführung

In JavaScript ist Drosselung eine Technik zur Begrenzung der Rate an dem eine Funktion ausgeführt werden kann.

Benutzerdefinierte Drosselfunktion

Die bereitgestellte benutzerdefinierte Drosselfunktion ist zwar funktionsfähig, weist jedoch den Fehler auf, dass sie die Funktion nach Ablauf der Drosselzeit erneut auslöst. Hier ist eine verfeinerte Version:

<code class="js">function throttle(fn, wait, options) {
  if (!options) options = {};
  var context,
    args,
    result,
    timeout = null,
    previous = 0;
  var later = function () {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = fn.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function () {
    var now = Date.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = fn.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
}</code>

Diese Version behebt das Problem der Mehrfachauslösung nach der Drosselungsperiode, indem anpassbare Optionen für das Verhalten der Vorder- und Hinterkante implementiert werden.

Vereinfachte Drosselfunktion

Wenn Sie keine erweiterten Optionen benötigen, steht eine vereinfachte, nicht konfigurierbare Gasfunktion zur Verfügung:

<code class="js">function throttle(callback, limit) {
  var waiting = false;
  return function () {
    if (!waiting) {
      callback.apply(this, arguments);
      waiting = true;
      setTimeout(function () {
        waiting = false;
      }, limit);
    }
  };
}</code>

Das obige ist der detaillierte Inhalt vonWie implementiert man eine einfache Drosselfunktion in JavaScript ohne externe Bibliotheken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!