javascript - 将 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 RPM 的速度运行。

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 功能!