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.
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 && 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); } }; }
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 && 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>
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!