取消请求动画帧有优化吗？

Question

下面的window.cancelAnimationFrame();这个例子会有什么好处吗（或者甚至可能？

如果是这样，我会怎么做，为什么？

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;
});

Answer 1

您可以通过直接将 doSomething 作为 rAF 参数传递并在 doSomething 中直接包含 ticking = false 来避免匿名函数。

您还可以删除 last_known_scroll_position 变量声明，因为它只是 window.scrollY，这也消除了对 doSomething 的参数的需要。顺便说一下，为了获得更广泛的浏览器支持，使用 pageYOffset 比 scrollY 更好。

否则，你的逻辑是好的。

这个标志将避免在另一个函数调用已经在等待时堆叠，并且使用 cancelAnimationFrame 只会不必要地用这个匿名函数的创建填满你的内存，迫使过早的 GC 踢。

所以一旦应用了所有内容，您就会得到类似的东西：

var ticking = false;

function doSomething() {
  ticking = false;
  var scroll_pos = window.pageYOffset;
  // do something with the scroll position

}

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

取消请求动画帧有优化吗？

Is there an optimization in canceling request animation frame?

javascript

scroll

requestanimationframe

cancelanimationframe