javascript - 性能 - window.onscroll 与 setInterval

Question

在性能方面有什么更好的解决方案 - 通过 setInterval 每 100 毫秒执行一个函数或在页面滚动时执行一个函数？我刚刚检查过，单次滚动可以导致一个函数执行 50 多次。将 setInterval 设置为 100 毫秒将导致函数每秒仅执行 10 次，但不利的一面是，即使页面未滚动，该函数也会执行。

功能比较简单(检查window.pageYOffset，超过100就改变样式)

Answer 1

这听起来像是debounce 函数的工作。这样的方法速率限制了对函数的调用。

您提到单个卷轴击中您的回调超过 50 次。通过使用 debounce，回调不会被调用，直到 debounce 函数在指定的时间内未被调用。 (在下面的例子中是 300 毫秒)

var scrollHandler = debounce(function() {
    // your window.pageYOffset logic
}, 300);

window.addEventListener('scroll', scrollHandler);

可以在以下位置找到更完整的解释和示例 debounce 函数:

https://davidwalsh.name/javascript-debounce-function

或

Can someone explain the "debounce" function in Javascript

使用这种方法将进行更优化的调用次数，并且仅当页面与之交互时(听起来应该在页面滚动时发生)。