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) {
  let lastTime = 0;
  return function () {
      const now = new Date();
      if (now - lastTime >= timeFrame) {
          func();
          lastTime = now;
      }
  };
}

这是此存储库的一个简单实现

这取决于你通过滚动回调实现什么。在某些情况下，油门会更好用。例如，无限滚动。

因此，仅当用户停止滚动时才会触发反跳，并且我们需要在用户到达底部之前开始获取内容。

但是有了throttle，我们可以保证我们会不断检查距离底部有多远。

结论：

• debounce：将突然爆发的事件（如击键）分组为一个事件。
• throttle：保证每 X 毫秒执行恒定的流量。就像每 200 毫秒检查一次滚动位置来触发 CSS 动画一样。
• requestAnimationFrame：节流替代方案。当您的函数重新计算并在屏幕上渲染元素并且您希望保证平滑的更改或动画时。注意：不支持IE9。