RequestAnimationFrame 在代码中的位置

Question

有人可以分享您应该在动画循环中调用 RequestAnimationFrame 的位置吗？它应该在循环的开头还是循环的结尾？我已经看到它在循环开始时用它写了很多次，但是在循环的底部会不会更好，这样它就不会在它可能还在处理的时候被调用？或者 RequestAnimationFrame 是否检查它是否已经运行ning 而不是运行如果它已经运行ning 了？还是根本不重要？我试过移动它，但没有注意到我的代码有任何变化。

例如顶部：

function gameLoop() {
   RequestAnimationFrame(gameLoop);

   renderFrameHere();
}

例如底部：

function gameLoop() {
   renderFrameHere();

   RequestAnimationFrame(gameLoop);
}

谢谢，

Answer 1

我见过大多数程序员将 requestAnimationFrame 放在循环的底部...

但我不确定是否有必要。假设您开始第一个循环。然后，在第一个循环中，您立即请求第二个循环。第一个循环将始终在尝试第二个循环之前完全执行。

这是因为 requestAnimationFrame 为您排队多个未完成的帧循环，因此如果当前循环运行时间过长，它只会延迟下一个循环，直到当前循环结束。使用 rAF 时不会出现丢帧循环。

显示 requestAnimationFrame 如何排队循环的演示

这个演示运行 10 个循环，requestAnimationFrame 放在循环函数的顶部。循环中的代码有意延迟 1 秒——比 1/60 秒的典型 rAF 循环长得多。即便如此，rAF 正确执行了所有 10 个循环，即使每个循环花费的时间比通常的每个 rAF 循环 17 毫秒要长得多。

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>

RequestAnimationFrame 在代码中的位置

RequestAnimationFrame position in code

javascript

requestanimationframe