我在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] 删除。
我来说两句