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

JavaScript event handling scroll event with a delay

本文关键字：滚动 事件 延迟 事件处理 JavaScript      更新时间：2023-09-26

有人可以解释并帮助我解决这个问题吗？我的网页很笨拙，因为滚动功能正在将其向下拖动。我需要添加延迟，但不知道如何做到这一点。

$(window).scroll(handleScroll);

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

function debounce(method, delay) {
    clearTimeout(method._tId);
    method._tId= setTimeout(function(){
        method();
    }, delay);
}
$(window).scroll(function() {
    debounce(handleScroll, 100);
});

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

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

对于滚动事件，您不希望出现真正的限制。

对于滚动，您很可能需要一个像 Lodash 或 Underscore 这样的油门功能; 很好的例子：

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

这是此存储库的简单实现

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

因此，只有在用户停止滚动时才触发去抖动，我们需要在用户到达底部之前开始获取内容。

但是通过油门，我们可以保证我们不断检查我们离底部有多远。

结语：

  • 去抖动：将突发事件（如击键）分组为一个事件。
  • 限制：保证每 X 毫秒的恒定执行流。就像每 200 毫秒检查一次滚动位置以触发 CSS 动画一样。
  • requestAnimationFrame：一种油门替代方案。当您的函数重新计算并在屏幕上呈现元素时，您希望保证平滑的更改或动画。注意：不支持 IE9。
相关文章：