JavaScript 事件处理延迟滚动事件答案

【问题标题】：JavaScript event handling scroll event with a delayJavaScript 事件处理延迟滚动事件
【发布时间】：2012-08-17 16:14:52
【问题描述】：

有人可以解释并帮助我吗？我的网页很慢，因为滚动功能正在向下拖动它。我需要添加延迟，但不明白如何执行此操作。

$(window).scroll(handleScroll);

【问题讨论】：

请更新此问题以展示您自己的尝试，谢谢。

标签： javascript events

【解决方案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 会丢弃多余的滚动事件，而节流函数应将它们排队等待稍后处理（但以给定的最大速率）。

在滚动事件的情况下，您不需要真正的节流。

【讨论】：

其实是debouncing，和限流略有不同。
函数中如何使用参数？例如我需要类似 debounce(handleScroll(parameter_1,parameter_2), 100)
@Garavani：你可以将它包装在一个内联函数中：debounce(function () { handleScroll(parameter_1, parameter2) }, 100)。

【解决方案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的简单实现

【讨论】：