2012-05-01 9 views
11

Nach dem underscore documentation:Underscore.js: _.throttle (Funktion, warten)

throttle_.throttle (Funktion, warten)
erstellt und gibt einen neuen, gedrosselt Version des übergebenen Funktion , dass, wenn wiederholt aufgerufen wird, wird nur tatsächlich die ursprüngliche Funktion höchstens einmal pro Millisekunden warten. Nützlich für ratenbegrenzende Ereignisse, die auftreten schneller als Sie mithalten können.

Was bedeutet es Useful for rate-limiting events that occur faster than you can keep up with.
Diese Funktion entspricht setTimeout mit einer Funktion, die sich selbst aufruft?
Kann mir jemand ein Beispiel für jsfiddle geben?

+1

Es ist nützlich z.B. für Scroll- oder Resize-Event-Handler, die sonst beim Scrollen oder Ändern der Größe des Fensters für die meisten Zwecke häufig ausgelöst werden. – Niko

Antwort

7

es setTimeout() nicht nur ist Try this

var a = _.throttle(function(){console.log('called')}, 1000); 
while(true) { 
    a(); 
} 

wird es einmal jede Iteration jede Sekunde und nicht einmal aufgerufen werden. In nativer JS würde es wie folgt aussehen:

var i = null; 
function throttle(func, delay){ 
    if (i) { 
     window.clearTimeout(i); 
    } 
    i = window.setTimeout(func, delay) 
} 

nicht genau das gleiche, aber nur um zu zeigen, dass die Funktion einmal

+0

Sie sollten 'while (true)' nicht verwenden – andlrc

+6

Dies ist 'debounce', nicht' gascross', da es niemals so lange feuern wird, wie es aufgerufen wurde, bevor der Timer gelöscht wurde. – vsync

4
genannt wird

Darhazer's answer

zu verlängern Es ist mehr wie, außer _.throttle Unmittelbare genannt wird und dann wieder nach delay Millisekunden

function throttle(func, delay) { 
    var timer = 0; 

    return function() { 
     var context = this, 
      args = [].slice.call(arguments); 

     clearTimeout(timer); 
     timer = setTimeout(function() { 
      func.apply(context, args); 
     }, delay); 
    }; 
} 
+3

Dies ist auch eine "Debounce" -Funktion ... nicht eine "Drosselung". http: // drupalmotion.com/article/debounce-and-throttle-visuelle Erklärung – vsync

1

fand ich dieses ausgezeichnete jsfiddle, die hel ped mich:

http://jsfiddle.net/amyseqmedia/dD99u/37/

In meinem Fall habe ich Drossel benötigt, da eine Funktion (die eine Server-Anforderung war) wurde über 500 mal in 1 Sekunde aufgerufen wird, und wurde eine Überlastung der Server. Also habe ich es so geändert, dass die Funktion nur einmal pro 3 Sekunden aufgerufen werden konnte. Es spielt also keine Rolle, wie oft es aufgerufen wird, es tritt nur einmal alle 3 Sekunden auf.

Etwas wie folgt aus:

var informationFromServer; 
var a = _.throttle(function(){ 
    informationFromServer = serverCallFunction(); 
}, 3000); 

function getsCalledALot() 
{ 
    a(); 
} 

function serverCallFunction() 
{ 
    var data = $.post.... 
    return data; 
} 
+0

einverstanden, http://jsfiddle.net/amyseqmedia/dD99u/37/ ist ausgezeichnet! – jbobbins

+0

die Geige funktioniert es nicht mehr. –

1

Der Unterschied zwischen Gas und debounce hier beschrieben wird: https://css-tricks.com/the-difference-between-throttling-and-debouncing/

/* 
"Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called." 
"Perhaps a function is called 1,000 times in a quick burst, dispersed over 3 seconds, then stops being called. If you have debounced it at 100 milliseconds, the function will only fire once, at 3.1 seconds, once the burst is over. Each time the function is called during the burst it resets the debouncing timer." 
*/ 
_.debounce = (fn, delay) => { 
    let timer 
    return (...args) => { 
    if (timer) clearTimeout(timer) 
    timer = setTimeout(() => { 
     fn.apply(null, args) 
    }, delay) 
    } 
} 
/* 
"Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds." 
*/ 
_.throttle = (fn, delay) => { 
    let canCall = true 
    return (...args) => { 
    if (canCall) { 
     fn.apply(null, args) 
     canCall = false 
     setTimeout(() => { 
     canCall = true 
     }, delay) 
    } 
    } 
} 
0

_.throttle wird verwendet, häufige Anrufe für ein auf ein Verfahren zur Verhinderung insbesondere ms.Refer Bild dieses zu verstehen RestrictfrequentCall.jpg