的setTimeout或setInterval的或requestAnimationFrame

Question

对于HTML5游戏，用帆布动画的移动设备。

我面临着各自不同的设备与其他人之间的速度也有一定的性能问题。

requestAnimationFrame速度根据设备的速度的游戏动画。 setInterval的吓了我一跳，有从一个设备到另一个延迟。 setTimeout的也慢在画布上绘制。

谁曾与移动HTML5游戏以往的经验可以指导我扔他们三个人（或其他技术如果可用）用于开发在画布上的动画是在不同的移动设备稳定的最佳方式？

Answer 1

可能时，必须使用requestAnimationFrame，因为这就是它的意思了。这是最好的use a shim for support当它是没有，所以你不需要处理的具体细节。

为了让动画或游戏逻辑以相同的速度，尽管实际使用的方法来执行，你应该使用物理或基于这样的动画和基于时间的时间计算。

Answer 2

window.requestAnimFrame = function(){
    return (
        window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(/* function */ draw1){
            window.setTimeout(draw1, 1000 / 60);
        }
    );
}();
   window.requestAnimFrame(draw);
})();

使用此功能适用于所有情况

Answer 3

优化requestAnimationFrame（）自推出以来非常友好的CPU，导致动画停止在当前窗口或标签是不可见的。

https://flaviocopes.com/requestanimationframe/

 var count = 0;
    const IDS = requestAnimationFrame(repeatOften);

        function repeatOften() {
            count++;
            if(count > 4 ){
                // cancelAnimationFrame (IDS);
                 console.warn('finish');
                 return;
            }
            console.log('init' + count);
            // Do whatever
            requestAnimationFrame(repeatOften);
        }