## Warum werden JavaScript-Drosselungsfunktionen manchmal erneut ausgelöst, nachdem die Drosselungszeit abgelaufen ist?

JavaScript-Drosselfunktion

Einführung

JavaScript-Drosselung ist eine nützliche Technik, die verhindern kann, dass Funktionen zu häufig ausgeführt werden. Dies kann besonders in Situationen von Vorteil sein, in denen übermäßige Funktionsaufrufe zu Leistungsproblemen oder unbeabsichtigten Effekten führen können.

Benutzerdefinierte Drosselfunktionen

Der folgende JavaScript-Code stellt eine wiederverwendbare „Drossel“-Funktion bereit:

<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);
    }
  };
}

Überarbeitete Drosselungsfunktion

Die bereitgestellte Funktion weist jedoch einen bemerkenswerten Nachteil auf. Nach Ablauf der Drosselzeit wird die Funktion noch einmal ausgelöst. Dies kann in bestimmten Szenarien zu unerwünschtem Verhalten führen.

Eine überarbeitete Version der Drosselungsfunktion ist in Bibliotheken wie underscore.js und lodash verfügbar. Diese Version behebt effektiv das Problem des Auslösens der Funktion nach der Drosselzeit:

<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>

Vereinfachte Drosselfunktion

Eine vereinfachte, nicht konfigurierbare Version der Drosselfunktion wird unten bereitgestellt:

<code class="javascript">function throttle (callback, limit) {
    var waiting = false;                      // Initially, we're not waiting
    return function () {                      // We return a throttled function
        if (!waiting) {                       // If we're not waiting
            callback.apply(this, arguments);  // Execute users function
            waiting = true;                   // Prevent future invocations
            setTimeout(function () {          // After a period of time
                waiting = false;              // And allow future invocations
            }, limit);
        }
    }
}</code>

Mit dieser Funktion können Sie die Häufigkeit der Funktionsausführungen steuern, indem Sie den Parameter „Limit“ anpassen.

Das obige ist der detaillierte Inhalt von## Warum werden JavaScript-Drosselungsfunktionen manchmal erneut ausgelöst, nachdem die Drosselungszeit abgelaufen ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!