Hier sind einige fragenbasierte Titel, die zum Inhalt Ihres Artikels passen: * **Wie kann ich einfache Drosselung in JavaScript implementieren?** * **Was ist der beste Weg, eine JavaScript-Funktion zu drosseln?** *

Einfache Drosselung in JavaScript

In JavaScript ist Drosselung eine Technik, um die Ausführung einer Funktion auf ein bestimmtes Zeitintervall zu beschränken. Dies ist nützlich, wenn Sie vermeiden möchten, das System mit übermäßigen Funktionsaufrufen zu überlasten.

Vorhandene Drosselungsimplementierungen

Bibliotheken wie lodash und underscore bieten integrierte Drosselungsfunktionen. Das Einbeziehen dieser gesamten Bibliotheken für eine einfache Aufgabe kann jedoch überflüssig sein.

Eine benutzerdefinierte Drosselfunktion

Hier ist eine benutzerdefinierte Drosselfunktion, die als eigenständige Lösung verwendet werden kann:

<code class="javascript">function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last &amp;&amp; now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}

Verbesserung: Vermeidung doppelter Ausführung

Der bereitgestellte Code weist jedoch ein Problem auf, bei dem er die Funktion möglicherweise erneut auslöst, sobald das Drosselungsintervall abgelaufen ist. Um dieses Problem zu beheben, können wir die Funktion wie folgt ändern:

<code class="javascript">function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date;
    if (now < last + threshhold) {
      return; // prevent subsequent execution
    }

    last = now;
    fn.apply(context, arguments);
  };
}

Erweiterte Drosselfunktion

Für mehr Flexibilität und zusätzliche Optionen können Sie sich auf die folgende Implementierung beziehen :

<code class="javascript">function throttle(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = Date.now();
    if (!previous &amp;&amp; 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 = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout &amp;&amp; options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};</code>

Das obige ist der detaillierte Inhalt vonHier sind einige fragenbasierte Titel, die zum Inhalt Ihres Artikels passen: * **Wie kann ich einfache Drosselung in JavaScript implementieren?** * **Was ist der beste Weg, eine JavaScript-Funktion zu drosseln?** *. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!