requestAnimationFrame與setInterval,setTimeout

自打學習canvas動畫以來,都說requestAnimationFrame好,就一直用,也沒以爲有什麼太過於特殊的地方,直到剛纔,在寫完前面的"小球碰撞牆壁----幹掉偏差"以後,,忽然想去看看若是這裏改回setInterval,會是個什麼樣,差距究竟有多大?

結果....一看嚇一跳,差距太大了,說難聽點,setInterval...簡直像屎同樣

具體結果,只須要將前面那篇裏面的gamleLoop方法和該方法前面的那句gameLoop()  替換成下面的代碼,一看就知道了.

function gameLoop(){
    
    ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
    ball.draw(ctx);
    ball.update();
}    

setInterval(gameLoop,30)

不親自作實踐,就無法取得進步,果然是這樣.

requestAnimationFrame簡易可兼容的方法

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
            return 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);
        };
    }
}());