JavaScript: requestAnimateFrame werde schneller

Question

Ich habe eine Animation mit requesetAnimationFrame Und wenn ich es wiederhole, wird es schneller und schneller, bis es unsichtbar wird.

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

} 

Wie kann ich eine stabile, konstante Geschwindigkeit bekommen?

Answer 1

Sie rufen wahrscheinlich mehrmals die Nummer animation() an (z. B. bei jedem Klick auf eine Schaltfläche).

Jeder Aufruf von animation() beginnt neu zu wiederholen requestAnimationFrame() ->animation() ->requestAnimationFrame() ->animation() -> ... Sequenz.

E. g. Wenn Sie zweimal animation() anrufen, haben Sie zwei solcher Sequenzen und Ihre Bildrate verdoppelt sich.

Sie müssen die derzeit laufende Anfrage nach einem Animationsrahmen abbrechen, bevor Sie eine neue Anfrage senden. Siehe How to stop a requestAnimationFrame recursion/loop?