Question

有人可以分享您应该在动画循环中调用RequestAnimationFrame的位置。它应该在循环的开头还是循环的结尾？我已经看到它在循环开始时用它写了很多次，但是在循环的底部是不是更好，所以它可能仍在处理时不会被调用？或者RequestAnimationFrame是否检查它是否已经在运行，如果它已经运行则不运行它？或者根本没关系？我试过移动它并且没有发现我的代码有任何变化。

例如Top：

function gameLoop() {
   RequestAnimationFrame(gameLoop);

   renderFrameHere();
}

例如：

function gameLoop() {
   renderFrameHere();

   RequestAnimationFrame(gameLoop);
}

谢谢，

Answer 1

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

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

那是因为requestAnimationFrame为你排队多个不完整的帧循环，所以如果当前循环运行很长，它只会延迟下一个循环，直到当前循环结束。使用rAF时，您不会丢弃帧循环。

显示requestAnimationFrame队列循环的演示

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

请求代码中的RequestAnimationFrame位置

1 个答案: