requestAnimationFrame()

Posted 2020-06-09

因为settimeout和setinterval是无法保证执行时间的。加上浏览器的定时器不是精确到1毫秒：
Ie8及之前版本为15.625，也就是你设定的时间为0-15的话，那么最终执行可能是0毫秒或者15毫秒后执行
Ie9之后和chrome为4
火狐和safari为10
当该页面被切换出去，非激活，对定时器也有影响

 

Css动画浏览器知道目前有动画在实现，而用传统的定时做动画，浏览器不知道这是动画，因此才出现了 requestAnimationFrame，这样浏览器就知道在执行动画了，会进行优化。

 

这方法接受一个函数，在这函数里你可以放心修改在下次重绘时生效的Dom样式。他不是自己循环调用的，需要自己定义循环和停止。
火狐实现的里面函数接受一个时间戳，指示下次重绘发生的确切发生时间
chrome可以接受了第二个参数，表明动画在那个元素上发生，控制重绘范围。

 

兼容：
(function(){
function draw(timestamp){
//calculate difference since last repaint
var drawStart = (timestamp || Date.now()),
diff = drawStart - startTime;
//use diff to determine correct next step
//reset startTime to this repaint
startTime = drawStart;
//draw again
requestAnimationFrame(draw);
}
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame,
startTime = window.mozAnimationStartTime || Date.now();
requestAnimationFrame(draw);
})();