Comment implémenter une fonction d'accélérateur simple en JavaScript sans bibliothèques externes ?

Limitation simple en JavaScript sans bibliothèques externes

Introduction

En JavaScript, la limitation est une technique utilisée pour limiter le débit auquel une fonction peut être exécutée.

Fonction d'accélérateur personnalisée

La fonction d'accélérateur personnalisée fournie, bien que fonctionnelle, présente un défaut dans la mesure où elle déclenche à nouveau la fonction une fois le temps d'accélération terminé. Voici une version raffinée :

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

Cette version résout le problème des déclenchements multiples après la période d'accélération en implémentant des options personnalisables pour le comportement des fronts montant et descendant.

Fonction d'accélération simplifiée

Si vous n'avez pas besoin d'options avancées, une fonction d'accélérateur simplifiée et non configurable est disponible :

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

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!