Maison  >  Article  >  interface Web  >  Voici quelques titres basés sur des questions qui correspondent au contenu de votre article : * **Comment puis-je implémenter une limitation simple en JavaScript ?** * **Quelle est la meilleure façon de limiter une fonction JavaScript ?** *

Voici quelques titres basés sur des questions qui correspondent au contenu de votre article : * **Comment puis-je implémenter une limitation simple en JavaScript ?** * **Quelle est la meilleure façon de limiter une fonction JavaScript ?** *

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-25 08:54:28855parcourir

Here are a few question-based titles that fit the content of your article:

* **How Can I Implement Simple Throttling in JavaScript?** 
* **What's the Best Way to Throttle a JavaScript Function?**
* **Need to Prevent Overwhelm? Here's How to Throttle Yo

Limitation simple en JavaScript

En JavaScript, la limitation est une technique permettant de limiter l'exécution d'une fonction à un intervalle de temps spécifique. Ceci est utile lorsque vous souhaitez éviter de surcharger le système avec des appels de fonctions excessifs.

Implémentations de limitation existantes

Les bibliothèques telles que lodash et underscore fournissent des fonctions de limitation intégrées. Cependant, inclure ces bibliothèques entières pour une tâche simple peut être redondant.

Une fonction de limitation personnalisée

Voici une fonction de limitation personnalisée qui peut être utilisée comme solution autonome :

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

Amélioration : éviter les exécutions en double

Le code fourni présente cependant un problème où il peut déclencher à nouveau la fonction une fois l'intervalle d'accélération écoulé. Pour résoudre ce problème, nous pouvons modifier la fonction comme suit :

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

Fonction d'accélérateur avancée

Pour plus de flexibilité et d'options supplémentaires, vous pouvez vous référer à l'implémentation suivante :

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

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn