requestAnimationFrame()
- 中文意为“请求动画帧”，和setInterval和setTimeout类似，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它是一个相对于setInterval和setTimeout更科学的API。
- requestAnimationFrame的原理就是：在运行时浏览器会自动优化方法的调用，就是在当前绘制完成之后，去根据你机器的性能来确定间隔多长时间绘制下一帧，所以它是一个智能计算的过程。并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。
- 而setInterval和setTimeout会有一个固定的时间，比如我们指定给它每过60ms就绘制一帧，万一你绘制的内容非常大，以至于60ms之内不能完成，就会导致动画断续显示。
- 但是也有一个问题：fps————frame per second(每秒多少帧). 使用requestAnimFrame会导致帧与帧之间的时间间隔是不固定的，所以有一个动态的时间间隔(当切换到另一个网页时，画面是不进行刷新的，因此两帧之间的间隔会不停的增大，直到页面再切换回来才刷新下一帧)
用法
requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
requestID = requestAnimationFrame(callback); //callback为回调函数
cancelAnimationFrame方法用于取消定时器
var timer = requestAnimationFrame(callback);
cancelAnimationFrame(timer);
兼容
简单的兼容
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
更全面的兼容
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // Webkit中此取消方法的名字变了
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
