Mozilla滚动建议

Question

我需要一个粘条是可见的和固定后，一定的卷轴。我打算使用滚动事件，然后遇到Mozilla页面，它建议使用window.requestAnimationFrame，如下所示：

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
  // do something with the scroll position
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
  }
  ticking = true;
});

我有几个问题：

1 -滴答背后的逻辑是什么？

2 --在我看来，滴答总是正确的，因为if语句不返回任何内容。这将导致只调用一次doSomething函数。我想我错了，我错过了什么？

滚动的mozilla链接

Answer 1

默认浏览器行为

在每个滚动事件(无论是1像素或更多像素)上，浏览器将重新绘制布局。(为明显的布局用途)

性能问题

您的函数doSomething()可能不会在两个触发滚动事件之前完成。您可以将其看作是一堆doSomething函数，因为执行时间所能处理的调用将更多。

requestAnimationFrame()解

默认情况下，此函数在window对象中定义。它告诉浏览器在重新绘制布局之前等待传递函数的执行。

滴答声

如您所见，ticking只会在doSomething()之后成为false。它避免了前面提到的stack of events。它避免在函数完成和浏览器重新绘制布局之前执行另一个滚动事件的代码。

结论

它为您的滚动增加了性能。几天前，我问了一个问题，这说明了这种情况。