是否有一个优化取消请求动画帧

Is there an optimization in canceling request animation frame?

本文关键字：动画 请求 取消 有一个 优化 是否      更新时间：2023-09-26

在window.cancelAnimationFrame();中是否有任何好处(甚至可能)?

如果是，我该怎么做，为什么?

Ref: requestAnimationFrame MDN

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

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

您还可以删除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;
});
相关文章：