js滚动条滚动事件_快速提示：如何限制滚动事件

js滚动条滚动事件

本文由Vildan Softic和Julian Motz进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

监听滚动事件的危险之一是性能下降。 该浏览器将执行回调每一次用户滚动，它可以每秒许多事件。 如果回调执行了一堆重绘，则对最终用户来说是个坏消息。 重新绘制很昂贵，尤其是在重新绘制视图的大部分时，例如发生滚动事件时。

下面的示例说明了该问题：

见笔无节流的滚动事件由SitePoint（ @SitePoint ）上CodePen 。

除了性能下降和易于引起癫痫发作。 本示例说明了计算机完全按照您的指示执行操作时会发生的情况。 背景颜色之间没有平滑的过渡，屏幕只是闪烁。 任何不幸的程序员都可能会觉得这个世界上没有希望了。 有没有更好的方法？

监管事件

一种解决方案是推迟事件并一次管理大量事件。 有两个常用功能可以帮助我们解决此问题：油门和反跳。

油门可确保在给定的时间间隔内事件不断发生，而防抖动将一系列事件组合为一个事件。 一种考虑方式是节流阀是基于时间的，而反跳是事件驱动的。 节流可确保执行，而一旦发生分组则不会发生反跳。 如果您想了解细节，请查看有关防抖动和节流的深入讨论 。

去抖

防反跳解决了另一个问题，例如使用Ajax进行按键操作。 当您输入表格时，为什么每次击键都会发送请求？ 更为优雅的解决方案是将一系列按键击组合为一个事件，该事件将触发Ajax请求。 这符合键入的自然流程，并节省了服务器资源。 按下按键时，事件之间的间隔并不重要，因为用户输入的速率不是恒定的。

风门

由于不能保证具有防抖功能，因此替代方法是限制滚动事件。 滚动发生在给定的时间跨度上，因此适合节流。 用户开始滚动后，我们希望保证及时执行。

此技术有助于检查我们是否位于页面的特定部分。 给定页面的大小，滚动内容需要花费几秒钟的时间。 这样一来，节流功能便可以在任何给定间隔仅触发一次事件。 事件限制将使滚动体验更加流畅，并确保执行。

以下是使用普通JavaScript的可怜人的事件调节器：

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

此实现设置一个time变量，该变量跟踪何时首次调用该函数。 每次调用返回的函数时，它都会检查是否超过了wait间隔，如果触发间隔，则它将触发回调并重置time 。

请参阅CodePen上SitePoint （ @SitePoint ）的Pen Vanilla JS节流实现 。

使用图书馆

事件限制有很多危险，建议不要在内部自行制作。 建议不要使用自己的实现，而建议使用第三方实现。

Lodash

lodash是JavaScript中事件限制的事实上的标准。 该库是开源的，因此可以随时探索代码。 好的是库是模块化的，因此可以从中获取所需的内容。

使用lodash的节流功能，滚动事件节流变得简单：

window.addEventListener('scroll', _.throttle(callback, 1000));

这将传入滚动事件的波动限制为每1,000毫秒（一秒钟）一次。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

该API提供了一种leading和trailing选项，例如：

_.throttle(callback, 1, { trailing: true, leading: true });

这些选项确定回调是否在前沿和/或后沿执行。

这里的一个陷阱是，如果您将前导和尾随设置为false ，则不会触发回调。 将Leads设置为true将立即开始回调执行，然后进行限制。 当您将前导和尾随都设置为true ，这可以保证每个间隔执行一次。

查看有关CodePen的演示： 节流滚动事件

通过查看源代码，我发现有趣的是， throttle()只是围绕debounce()的包装。 节流只是传递一组不同的参数以更改所需的行为。 Throttle设置了一个maxWait ，一旦等待了那么长的时间就可以保证执行。 其余的实现保持不变。

希望您在下一次节流冒险中发现lodash有益！

结论

抑制与消除抖动的关键在于查看要解决的问题的性质。 这两种技术适用于不同的用例。 我建议从用户的角度看问题，找到答案。

使用lodash的好处在于，它在一个简单的API中提取了大量的复杂性。 好消息是您可以在项目中使用_.throttle() ，而不必添加整个库。 有lodash-cli这个工具，可让您仅使用所需功能来创建自定义版本。 事件限制只是整个库的一小部分。

翻译自: https://www.sitepoint.com/throttle-scroll-events/

js滚动条滚动事件