Maison > interface Web > js tutoriel > le corps du texte

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
Libérer: 2024-10-25 08:54:28
original
854 Les gens l'ont consulté

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);
    }
  };
}
Copier après la connexion

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);
  };
}
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!