mozRequestAnimationFrame()会接收一个时间码（从1970年1月1日起至今的毫秒数），表示下一次重绘的实际发生时间。这样，mozRequestAnimationFrame()就会根据这个时间码设定将来的某个时刻进行重绘。
但是webkitRequestAnimationFrame()和msRequestAnimationFrame()不会给回调函数传递时间码，因此无法知道下一次重绘将发生在什么时间。
如果要计算两次重绘的时间间隔，Firefox中可以使用既有的时间码，而在Chrome和IE则可以使用不太精确地Date()对象。
3.2 cancelRequestAnimFrame()的兼容性封装：
W3C也提供了cancelRequestAnimationFrame()方法，用于取消回调函数。requestAnimationFrame()方法会返回一个对象，用做标识回掉函数身份。若要取消回调函数的执行，可将其传给cancelRequestAnimationFrame() 。
window.cancelRequestAnimFrame = ( function() { return window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || clearTimeout; } )();
3.3 requestAnimationFrame()升级版封装方法：
另外还有一种更优雅的requestAnimationFrame()的兼容性封装方法：
(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (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); }; }());
总结
以上就是这篇文章的全部内容，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
您可能感兴趣的文章: