## Pourquoi les fonctions de limitation JavaScript se déclenchent-elles parfois à nouveau une fois le temps de limitation écoulé ?

Fonction de limitation JavaScript

Introduction

La limitation JavaScript est une technique utile qui peut empêcher les fonctions d'être exécutées trop fréquemment. Cela peut être particulièrement bénéfique dans les situations où des appels de fonction excessifs peuvent entraîner des problèmes de performances ou des effets inattendus.

Fonctions de limitation personnalisées

Le code JavaScript suivant fournit une fonction de « limitation » réutilisable :

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

Fonction de limitation révisée

Cependant, la fonction fournie présente un inconvénient notable. Une fois le temps d'accélération écoulé, la fonction est déclenchée une nouvelle fois. Cela peut entraîner un comportement indésirable dans certains scénarios.

Une version révisée de la fonction de limitation est disponible dans des bibliothèques telles que underscore.js et lodash. Cette version résout efficacement le problème du déclenchement de la fonction après le temps d'accélération :

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

Fonction d'accélération simplifiée

Une version simplifiée et non configurable de la fonction d'accélération est fournie ci-dessous :

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

Avec cette fonction, vous pouvez contrôler la fréquence d'exécution des fonctions en ajustant le paramètre "limite".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!