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

Question

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

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

参考：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;
});

Answer 1

您可以通过直接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;
});