requestAnimationFrame代替setTimeout

来源：互联网发布：多文件编程编辑：程序博客网时间：2024/06/06 05:21

1.requestAnimationFrame可以代替setTimeout做动画(一般来说，requestAnimationFrame频率为每秒60帧。)

2.兼容性IE9-不支持

3.回退兼容的写法(不支持则使用setTimeout)

        //示例        var i=0;        fun();        function fun() {            console.log(i);            if(i<100) {                requestAnimationFrame(fun);            }            i++;        }        //封装        (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);            };        }());

http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html

0 0