Question

所以我有一个运行循环：

var FRAME_TIME = 1000 / 60;
var lastTime = 0;
var fpsTime = 0;
var fps = 0;

function mainLoop(timestamp) {
    if (timestamp - lastTime >= FRAME_TIME) {
        fps++;
        lastTime = timestamp;
    }

    if (timestamp - fpsTime >= 1000) {
        console.log(fps);
        fps = 0;
        fpsTime = timestamp;
    }
    requestAnimationFrame(mainLoop);
}

现在，当监视器刷新为60时运行时，我按预期在控制台中打印“60”。但是，当在144运行resfresh时，我得到“48”=刷新的1/3。

为什么呢？时间就是时间，对吧......？

Answer 1

所以我认为主要问题归结为这些问题。

if (timestamp - lastTime >= FRAME_TIME) {
    fps++;
    lastTime = timestamp;
}

这就是说我们当前的帧时间（时间戳 - lastTime）是否超过（或等于）理想值的时间。帧（1000ms / 60 [144]），然后我们计算它，否则，它不被计算。

如果每一帧调用此函数（一次且仅一次），那么您不需要if语句，您只需执行＆＃34; fps ++＆＃34;每一帧，因为它将被1秒计数器重置。

Answer 2

if (timestamp - lastTime >= FRAME_TIME) fps++;并不好。这意味着它不会计算每一帧 - 只要FRAME_TIME已经过去就会计算。在144 fps时，这意味着在计算21 ms的下一帧之前有两帧（7 ms和14 ms），这是预期的FRAME_TIME之后的60 fps - 17 ms。这归结为只计算每三个帧 - 正是你所经历的。

要解决此问题，请在每次调用时执行fps++：

var fpsTime = 0;
var fps = 0;

function mainLoop(timestamp) {
    fps++;
    if (timestamp - fpsTime >= 1000) {
        console.log(fps);
        fps = 0;
        fpsTime = timestamp;
    }
    requestAnimationFrame(mainLoop);
}
mainLoop(performance.now());

requestAnimationFrame在各种/更高刷新率下的时间戳有什么不同？

2 个答案: