JavaScript: requestAnimateFrame get faster

Question

I have an animation with requesetAnimationFrame And when I replay it, it gets faster and faster until it gets invisible.

function tirer(){

    var missile=document.getElementById("missile");
    var currt= missile.currentStyle ||window.getComputedStyle(missile);
    if ( parseInt(currt.bottom)<700)
    missile.style.bottom=parseInt(missile.style.bottom)+20+"px";
    else
    alert ( "in top");


}
function animation (){
    tirer();
    requestAnimationFrame(animation);

}

How can I get it to be a stable, constant speed?

Possible duplicate of [Controlling fps with requestAnimationFrame?](http://stackoverflow.com/questions/19764018/controlling-fps-with-requestanimationframe) — Andrew Li, Jun 13 '16 at 19:18

score 2 · Answer 1 · edited May 23 '17 at 12:08

You probably call animation() multiple times (e.g. whenever a button is clicked).

Each call to animation() starts a new repeating requestAnimationFrame() -> animation() -> requestAnimationFrame() -> animation() -> ... sequence.

E. g. if you call animation() two times, your have two such sequences running and your framerate will double.

You need to cancel the currently ongoing request for an animation frame before sending a new request. See How to stop a requestAnimationFrame recursion/loop?

JavaScript: requestAnimateFrame get faster

1 Answers1