JavaScript-Drosselung ist eine nützliche Technik, die verhindern kann, dass Funktionen zu häufig ausgeführt werden. Dies kann besonders in Situationen von Vorteil sein, in denen übermäßige Funktionsaufrufe zu Leistungsproblemen oder unbeabsichtigten Effekten führen können.
Der folgende JavaScript-Code stellt eine wiederverwendbare „Drossel“-Funktion bereit:
<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); } }; }
Die bereitgestellte Funktion weist jedoch einen bemerkenswerten Nachteil auf. Nach Ablauf der Drosselzeit wird die Funktion noch einmal ausgelöst. Dies kann in bestimmten Szenarien zu unerwünschtem Verhalten führen.
Eine überarbeitete Version der Drosselungsfunktion ist in Bibliotheken wie underscore.js und lodash verfügbar. Diese Version behebt effektiv das Problem des Auslösens der Funktion nach der Drosselzeit:
<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>
Eine vereinfachte, nicht konfigurierbare Version der Drosselfunktion wird unten bereitgestellt:
<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>
Mit dieser Funktion können Sie die Häufigkeit der Funktionsausführungen steuern, indem Sie den Parameter „Limit“ anpassen.
Das obige ist der detaillierte Inhalt von## Warum werden JavaScript-Drosselungsfunktionen manchmal erneut ausgelöst, nachdem die Drosselungszeit abgelaufen ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!