setTimeout or setInterval or requestAnimationFrame

问题

For HTML5 games,with canvas animation for mobile devices.

I'm facing some performance issues which differ the speed between each device and the others.

requestAnimationFrame speed the animation of the game according to the device speed.
setInterval shocked me that there are a delay from a device to another.
setTimeout is also slow the drawing on canvas.

Who had a previous experience with Mobile HTML5 games can guide me throw the best way of three of them (or other techniques if available) for developing animation on canvas be stable on different mobile devices ?

回答1:

Always use requestAnimationFrame when possible, since that's what it's meant for. It's best to use a shim for support when it isn't, so you don't need to deal with the specific details.

In order for animation or game logic to perform at the same speed despite of actual method used, you should use time based animation and time based calculations for physics or such.

回答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);
})();

use this function for all cases

回答3:

OPTIMIZATION requestAnimationFrame() since its introduction was very CPU friendly, causing animations to stop if the current window or tab is not visible.

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);
        }

来源：https://stackoverflow.com/questions/13935262/settimeout-or-setinterval-or-requestanimationframe