underscore.js：_.throttle（功能，等待）

Question

根据underscore documentation：

throttle_.throttle(函数，等待)
创建并返回一个新的， 传递函数的节流版本，当被调用时 重复，实际上最多只会调用一次原始函数 每等待毫秒。对于限速事件很有用 发生的速度比你跟得上的快。

Useful for rate-limiting events that occur faster than you can keep up with是什么意思。
这个函数相当于 setTimeout 有一个函数调用自己？
有人可以给我一些关于 jsfiddle 的例子吗？

Answer 1

这不仅仅是 setTimeout() 试试这个

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

它将每秒调用一次，而不是每次迭代调用一次。 在原生 JS 中它看起来像：

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

不完全一样，只是为了说明函数被调用一次

Answer 2

扩展Darhazer's answer

这更像是，除了 _.throttle 被立即调用，然后在 delay 毫秒后再次调用

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

这里描述了油门和去抖动之间的区别： 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)
    }
  }
}

Answer 4

我发现这个对我有帮助的优秀 jsfiddle：

jsfiddle.net/max23_/2wn5ybdg/1（由@max23_更新）

在我的例子中，我需要限制，因为一个函数（这是一个服务器请求）在 1 秒内被调用了大约 500 次，并且使服务器过载。所以我改变了它，使函数只能每 3 秒调用一次 max once。所以不管它被调用多少次，它最多每 3 秒只发生一次。

类似这样的：

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

function getsCalledALot()
{
    a();
}

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

Answer 5

_.throttle用于防止对特定ms的方法频繁调用。参考图片了解这个RestrictfrequentCall.jpg