2012-05-01 9 views
11

Según la underscore documentation:underscore.js: _.throttle (función, espera)

throttle_.throttle (función, esperar)
crea y devuelve una nueva, estrangulado versión de la función pasado , que, cuando se invoca repetidamente, solo llamará a la función original a lo sumo una vez por cada espera de milisegundos. Es útil para eventos que limitan la velocidad que ocurren más rápido de lo que usted puede seguir.

Qué significa Useful for rate-limiting events that occur faster than you can keep up with.
Esta función es equivalente a setTimeout con una función que se llama a sí misma?
¿Alguien puede darme un ejemplo sobre jsfiddle?

+1

Es útil p.ej. para desplazarse o cambiar el tamaño de los controladores de eventos que de otra manera se activan a menudo para la mayoría de los propósitos al desplazar o cambiar el tamaño de la ventana. – Niko

Respuesta

7

No se trata sólo setTimeout() Prueba este

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

que se llamará una vez por segundo y no una vez cada iteración. En JS nativas que se vería así:

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

exactamente lo mismo, pero sólo para ilustrar que la función se llama una vez

+0

No debe usar 'while (true)' – andlrc

+6

Esto es 'rebote', no' acelerador', ya que nunca se disparará mientras se llame antes de que se borre el temporizador. – vsync

4

Para extender Darhazer's answer

Es más como, excepto _.throttle se llama inminente y luego otra vez después de delay milisegundos

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

Esta es también una función 'rebote' ... no una' aceleradora'. http: // drupalmotion.com/article/rebotar-y-acelerar-visual-explicación – vsync

1

I encontraron esta excelente jsFiddle que hel Me PED:

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

En mi caso necesitaba acelerador porque una función (que era una petición del servidor) estaba siendo llamado alrededor de 500 veces en 1 segundo y se sobrecarga del servidor. Así que lo cambié para que la función solo se pudiera llamar max una vez por 3 segundos. Por lo tanto, no importa cuántas veces se llame, solo se producirá una vez cada 3 segundos como máximo.

Algo como esto:

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

function getsCalledALot() 
{ 
    a(); 
} 

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

de acuerdo, http://jsfiddle.net/amyseqmedia/dD99u/37/ ¡es excelente! – jbobbins

+0

el violín ya no funciona. –

1

Se describe la diferencia entre el acelerador y la eliminación de rebote aquí: 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 se utiliza para evitar que las llamadas frecuentes en un método para una ms.Referir imagen en particular para comprender esto RestrictfrequentCall.jpg

Cuestiones relacionadas