setTimeout or setInterval or requestAnimationFrame

Question

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.

Answer 1

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

Answer 2

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.

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