使用requestAnimationFrame代替setTimeout进行去抖动/节流阀有什么好处

马克斯·科瑞斯基(Max Koretskyi)

我在MDN上使用requestAnimationFrame而不是使用了这个示例setTimeout

// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

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

这让我开始思考是否可以使用requestAnimationFrame代替,setTimeout(fn, 0)以及是否有任何好处?我已经用谷歌搜索了,似乎所有的比较都是在动画的上下文中完成的,但是不相关的功能-如反跳/油门或者仅仅是如果您需要在重画后运行代码呢?

巴林特

如果您想确保您没有做不必要的工作,那么RequestAnimationFrame就是很好的选择,因为您在两次框架更新之间进行了两次更改。

就其本身而言,requestAnimationFrame不能用于动画以外的任何事情,因为它只能等待16.666毫秒(如果没有延迟),因此您需要将多个链接在一起。但是,如果将其与setTimeout配对,那么您将能够等待毫秒的间隔,并确保在正确的时间绘制所有内容。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章