RequestAnimationFrameのコード位置

Question

誰かが、アニメーションループ内でRequestAnimationFrame呼び出しを行うべき場所を分かち合うことができますか？それはループの始めかループの終わりにあるべきですか？私はそれがループの始めに何度も書き込まれているのを見ましたが、ループの最下部にいるほうがいいので、まだ処理されている間は呼び出されません。または、RequestAnimationFrameには、すでに実行中であるかどうかを確認するチェックがあり、実行中の場合は実行しませんか？それとも全く問題ではないのですか？私はそれを移動しようとしたし、私のコードに変更を気づいていない。

例：トップ：

function gameLoop() { 
    RequestAnimationFrame(gameLoop); 

    renderFrameHere(); 
} 

例：ボトム：

function gameLoop() { 
    renderFrameHere(); 

    RequestAnimationFrame(gameLoop); 
} 

はありがとう、私はほとんどのプログラマーはループの一番下にrequestAnimationFrameのを入れて見てきました

Answer 1

...

しかし、私はそれが必要であるかどうかはわかりません。最初のループを開始するとしましょう。次に、その最初のループではすぐにが2番目のループを要求します。最初のループは、2番目のループが試行される前でも常に完全に実行されます。

これは、​​が複数の不完全なフレームループをキューに入れているためです。したがって、現在のループが長く実行されると、現在のループが終了するまで次のループが遅れるだけです。 rAFを使用する場合は、フレームループを削除しません。どのようにrequestAnimationFrameのキューを示す

デモは

ループこのデモでは、ループ機能の最上部に置く​​と10個のループを実行します。ループのコードは意図的に1秒遅れます。典型的なrAFサイクルの1/60秒よりはるかに長い時間です。それでも、rAFは、各ループが通常のrAFループ当たり17msよりもはるかに長い時間を要しても、10ループすべてを適切に実行します。

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>