将setInterval与requestAnimationFrame一起使用

Question

我想setInterval用于程序中的实际步骤和requestAnimationFrame渲染.我认为这将是完美的混合:渲染速度不会减慢实际进度,因此帧速率的下降只会影响帧速率并仍然同步.然而,我得到的也是setInterval功能的下降.

我的意思的一个例子,故意陷入阴影:http://jsfiddle.net/Ltdz168m/

减少或增加补充次数,你会看到差异

似乎requestAnimationFrame实际上不是渲染延迟减慢JavaScript的解决方案.那么我如何更新事物的逻辑方面,可以在60 fps下完成,而不会妨碍渲染？WebWorkers绝对必要吗？

Answer 1

问题是浏览器仍然只能一次做一件事.因此,如果它正在渲染,则无法更新位置.

在做支持可变帧速率的东西时,你应该总是使用Delta Timing.它的工作原理如下:

requestAnimationFrame(function(e) {
  document.getElementById('status').innerHTML = "Delta time: "+e;
  
  // lag randomly
  while(Math.random() > 0.0000001) {}
  
  requestAnimationFrame(arguments.callee);
});

<div id="status"></div>

正如您所看到的(希望如此),无论帧速率如何,显示的增量时间都会持续增加.这意味着你可以做,例如,angleFromStart = e/1000*Math.PI*2;你的点将以精确的60转速进行轨道运行.

var angle=0,
    radian=Math.PI/180;
var canvas=document.getElementById("canvas"),
    context=canvas.getContext("2d");
context.shadowColor="black";
context.shadowBlur=100;
requestAnimationFrame(function draw(e) {
  angle = e/1000*Math.PI*2;
    var x=canvas.width/2+Math.cos(angle)*canvas.width/4,
        y=canvas.height/2+Math.sin(angle)*canvas.height/4;
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(x, y, 5, 0, Math.PI*2);
    context.closePath();
    for(var i=0; i<255; i++) {
        context.fill();
    }
    requestAnimationFrame(draw);
});

#canvas {
    border: 1px solid black;
}

<canvas id="canvas"></canvas>

PS:我喜欢新的Stack Snippet功能!