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

Question

According the underscore documentation:

throttle_.throttle(function, wait)
Creates and returns a new, throttled version of the pa

Answer 1

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

Answer 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);
    };
}

Answer 3

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

Answer 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;
}

Answer 5

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)
    }
  }
}