将处理程序附加到窗口滚动事件

Question

John Resig建议使用setInterval()以减少调用处理程序的次数 - 请参阅http://ejohn.org/blog/learning-from-twitter/

约翰的博客文章解决方案:

var outerPane = $details.find(".details-pane-outer"),
    didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        // Check your page position and then
        // Load in more results
    }
}, 250);

可以调用一个持续间隔真的是一个明智的想法吗？

迈克尔杰克逊的方法是否更有意义,因为它并不意味着我们不断进行民意调查？

迈克尔的评论解决方案:

var timer = 0;

$(window).scroll(function () {
  if (timer) {
    clearTimeout(timer);
  }

  // Use a buffer so we don't call myCallback too often.
  timer = setTimeout(myCallback, 100);
});

任何人都可以分享任何意见/建议吗？

丰富

Answer 1

约翰·雷西格的做法是最明智的。在大多数现代浏览器中，滚动事件会被大量调度。对于 y 轴上仅 50px 的快速滚动操作，可以调度 20-30 次。如果在每个事件期间调用一个处理程序，您将锁定 UI 线程并不稳定地滚动（正如 John 指出的那样）。

另外，请记住，每 50 毫秒执行一次快速函数在现代浏览器中并不是什么大问题。即每 5 或 6 帧调用一次函数。您试图避免的是每一帧上的函数调用，如果您使用滚动事件，就会发生这种情况。

已编辑

哦，抱歉，我在发布第一个版本时错过了该评论（我只在帖子中搜索了 MJ 的名字，而不是评论）。限制滚动事件处理程序的速率是一种明智的方法+1。事实上，我比 Resig 的策略更喜欢它，因为当第一个滚动事件发生时，你总是会得到它，然后将其后抛出的每个其他滚动事件限制为每 100 毫秒最多一次。

使用 Resig 的方法，在您的回调收到滚动事件通知之前，您可能会延迟最多 100 毫秒。对于重度用户来说，100 毫秒的延迟可能会被认为是一个缓慢的界面。