Question

有人可以解释并帮助我解决这个问题。我的网页很慢，因为滚动功能正在拖动它。我需要添加一个延迟，但不明白该怎么做。

$(window).scroll(handleScroll);

Answer 1

您可以编写一个简单的~~throttle~~ debounce function来限制每秒处理滚动事件的次数。

function debounce(method, delay) {
    clearTimeout(method._tId);
    method._tId= setTimeout(function(){
        method();
    }, delay);
}

$(window).scroll(function() {
    debounce(handleScroll, 100);
});

这将确保每次调用handleScroll之间至少有100毫秒（换句话说，每秒最多调用10次）。

正如zzzzBov指出的那样，Zakas描述的油门功能实际上是一个去抖功能。不同之处在于debounce会丢弃多余的滚动事件，而节流功能应将它们排队等待稍后处理（但是以给定的最大速率处理）。

对于滚动事件，您不需要真正的限制。

Answer 2

对于滚动，您很可能需要节流功能，例如Lodash或Underscore，很好的例子：

function throttle(func, timeFrame) {
  var lastTime = 0;
  return function () {
      var now = new Date();
      if (now - lastTime >= timeFrame) {
          func();
          lastTime = now;
      }
  };
}

这是this repo上的简单实现

JavaScript事件处理滚动事件有延迟

2 个答案: