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 ?** *
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 && 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 && 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 && 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!