RequestAnimationFrame Position im Code

Question

Kann jemand bitte teilen, wo Sie den RequestAnimationFrame Aufruf in der Animationsschleife haben sollte. Sollte es am Anfang der Schleife oder am Ende der Schleife sein? Ich habe gesehen, dass es am Anfang der Schleife oft geschrieben wurde, aber wäre es nicht besser, am Ende der Schleife zu sein, so dass es nicht aufgerufen wird, während es noch verarbeitet werden könnte? Oder hat der RequestAnimationFrame eine Überprüfung, um zu sehen, ob er bereits läuft und nicht, wenn er bereits läuft? Oder spielt es überhaupt keine Rolle? Ich habe versucht, es zu verschieben und habe keine Änderungen in meinem Code bemerkt.

Eg Top:

function gameLoop() { 
    RequestAnimationFrame(gameLoop); 

    renderFrameHere(); 
} 

Eg Unten:

function gameLoop() { 
    renderFrameHere(); 

    RequestAnimationFrame(gameLoop); 
} 

Danke,

Answer 1

ich die meisten Programmierer request am unteren Rand der Schleife setzen gesehen habe ...

Aber ich bin mir nicht sicher, dass das notwendig ist. Nehmen wir an, Sie starten eine erste Schleife. Dann, in dieser ersten Schleife die sofort Anfrage eine zweite Schleife. Die erste Schleife wird immer vollständig ausgeführt, bevor die zweite Schleife überhaupt versucht wird.

Das liegt daran, dass requestAnimationFrame mehrere unvollständige Rahmenschleifen für Sie in die Warteschlange stellt. Wenn also die aktuelle Schleife lange läuft, wird die nächste Schleife verzögert, bis die aktuelle Schleife beendet ist. Sie haben bei Verwendung von rAF keine Rahmenloops verloren.

Demo wie request Warteschlangen zeigt Schleifen

Diese Demo läuft 10 Schlaufen mit requestAnimationFrame an der Spitze der Schleife Funktion gesetzt. Der Code in der Schleife verzögert absichtlich 1 Sekunde - viel länger als ein typischer rAF-Zyklus von 1/60 Sekunde. Trotzdem führt rAF alle 10 Schleifen korrekt aus, obwohl jede Schleife viel länger dauert als die üblichen 17 ms pro RAF-Schleife.

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var loopCount=0; 
 

 
requestAnimationFrame(loop); 
 

 
function loop(time){ 
 
    loopCount++; 
 
    if(loopCount<10){ requestAnimationFrame(loop); }  
 
    var t1=performance.now()+1000; 
 
    while(performance.now()<t1){} 
 
    ctx.fillText('Loop count: '+loopCount+', time: '+time,20,loopCount*15); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<h4>rAF at top of loop still runs all 10 frames even<br>if the code in the loop takes extra long to complete</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>