javascript - JavaScript 事件处理延迟滚动事件

Question

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

$(window).scroll(handleScroll);

Answer 1

您可以编写一个简单的油门去抖动函数来限制每秒处理滚动事件的次数。

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

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

这将确保每次调用之间至少有 100 毫秒的间隔handleScroll（或者，换句话说，每秒最多调用 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;
      }
  };
}

这是这个 repo的简单实现