Javascript-无法调整FrameRate-requestanimationframe

我开始循环

function gameLoop(){
   update();
   draw();
   requestAnimFrame(gameLoop);
}

var requestAnimFrame =  window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function(callback) {
                        window.setTimeout(callback, 1000 / 1);
                    };

我无法调整帧频。它总是非常快。为什么不能将其更改为每秒1帧。我只想出于测试目的。

每次都必须清除 Canvas 吗？似乎不清除就可以正常工作。

谢谢。

这是完整代码的 fiddle 的链接:
complete code

谢谢

最佳答案

rAF已锁定以监视显示器的同步信号，通常为60 Hz，因此我们无法为其本身调整FPS(当制表符处于非事件状态或靠电池供电时，浏览器可能会降低FPS)。

另外，您要更改的是poly-fill的后备；也就是说:如果浏览器不支持rAF，它将改为使用setTimeout。但是，当今大多数浏览器都支持rAF(甚至没有前缀)，因此永远不会使用setTimeout。

您可以做两件事:

(在测试时)直接使用setTimeout替换循环中的rAF

例子:

var FPS = 1;

function testLoop() {

    ... ordinary code

    setTimeout(testLoop, 1000/FPS);
}

通过使用计数器进行节气门皇家空军:

例子:

var framesToSkip = 60,
    counter = 0;

function loop() {

    if (counter < framesToSkip) {
        counter++;
        requestAnimationFrame(loop);
        return;
    }

    /// do regular stuff

    counter = 0;
    requestAnimationFrame(loop);
}

MODIFIED FIDDLE HERE

最有可能实现节流的更好方法，但是我试图说明基本原理。它仍将以60 FPS的全速运行，但是您的代码将执行最少的操作，并且只有当计数器达到其计数时，它才会执行主代码。

如果下一个绘制内容将覆盖先前绘制的内容，或者您​​当然希望保留它，则不必每次都清除 Canvas 。如果需要，您还可以清除一部分以进行进一步优化。

关于Javascript-无法调整FrameRate-requestanimationframe，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19000109/