javascript - 如何节省 onscroll 函数的 JS DOM 调用

Question

我想要实现的目标:

• 如果用户从顶部(原点)滚动超过 24 像素，则执行一次操作。
• 如果用户向后滚动到顶部(原点)的 24 像素范围内，则将其反向滚动一次。

我有这个代码:

$("#box").scroll(function(){
    var ofs = $(".title").offset().top;
    if (ofs <= 24)
        // Do something
    else
        // Reverse that something
})

据我了解，此函数每次用户滚动时都会运行，这可能会导致对 DOM 的数百次调用。

1. 这并不是所有资源都有效 - 有没有更被动的方法来实现这一点？
2. 即使滚动量很小，这两个条件也会重复触发 - 有什么方法可以只执行一次代码，并且在相同条件为真时不重复？

Answer 1

您想要做的是限制请求或称为“反跳”的操作。 Throttling 只允许在一段时间内对任何内容进行一定数量的调用，debounce 只在操作停止后的一定时间后调用该函数。

这是一个很好的解释链接:https://css-tricks.com/the-difference-between-throttling-and-debouncing/

有几个库可以为您执行此操作，例如 Underscore 和 Lodash。您也可以自己推出，去抖动的前提基本上如下:

var timer;
$('#box').scroll(function(){
    //cancel and overwrite timer if it exists already
    // set timer to execute doWork after x ms
})
function doWork(){
    //do stuff
}

您还可以考虑使用requestAnimationFrame，具体取决于浏览器支持。 requestAnimationFrame example看起来大多数现代浏览器和 IE >= 10 都支持它