underscore.js: _.throttle(function, wait)

问题

According the underscore documentation:

throttle_.throttle(function, wait)
Creates and returns a new, throttled version of the passed function, that, when invoked repeatedly, will only actually call the original function at most once per every wait milliseconds. Useful for rate-limiting events that occur faster than you can keep up with.

What does it means Useful for rate-limiting events that occur faster than you can keep up with.
This function is equivalent to setTimeout with a function that calls itself?
Can someone provide me some example on jsfiddle?

回答1:

it's not just setTimeout() Try this

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

it will be called once every second and not once every iteration. In native JS it would look like:

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

not exactly the same, but just to illustrate that the function is called once

回答2:

To extend Darhazer's answer

It's more like, except _.throttle is called imminently and then again after delay milliseconds

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:

The difference between throttle and debounce is described here: 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)
    }
  }
}

回答4:

I found this excellent jsfiddle that helped me:

jsfiddle.net/max23_/2wn5ybdg/1 (updated by @max23_)

In my case I needed throttle because a function (which was a server request) was being called about 500 times in 1 second, and was overloading the server. So I changed it so that the function could only be called max once per 3 seconds. So it doesn't matter how many times it's called, it'll only occur once per 3 seconds max.

Something like this:

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

function getsCalledALot()
{
    a();
}

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

回答5:

_.throttle is used to prevent frequent calls on a method for a particular ms.Refer image to understand this RestrictfrequentCall.jpg

来源：https://stackoverflow.com/questions/10395227/underscore-js-throttlefunction-wait

标签

javascript

underscore.js