Javascript setTimeout and frame rate

Javascript setTimeout and frame rate

本文关键字：rate frame and setTimeout Javascript      更新时间：2023-09-26

我在javascript中使用帧速率计数器似乎遇到了一些意外的结果。直到最近，计数器一直很好，我一直在以 30fps 的速度运行我的小 js 应用程序。

它使用 setTimeout（）（带有时间调整来对抗系统"落后"）。

window.requestAnimFrame = (function() 
{
    return function (callback) {
        time += FPS;
        Heartbeat._eTime = (new Date().getTime() - Heartbeat._start);
        var diff = Heartbeat._eTime - time;
        Heartbeat._delta = FPS - diff;
        Heartbeat._deltaS = Heartbeat._delta / 1000;
        window.setTimeout(callback, FPS - diff);
    };
})();

检测信号只是一个包含帧速率信息的对象。

*这是我的问题： *

_MainLoopHandler: function () {
    timer = new Date().getTime();
    counter = timer;
    while (this._messages.length > 0 && (counter - timer) < 5)
    {
        // process messages from _messages array
    }
    counter = new Date().getTime();
    // THE ABOVE IS HAPPY AT 30 FPS

    while ((counter - timer) < 6) {
        1 + 1;
    }
    // THE ABOVE WHILE IS VERY UNHAPPY :(
}

因此，上面的代码块是每 33.33 毫秒 （30 fps） 从 setTimeout 调用的函数。 如果我在循环时取下底部，FPS 计数器将以 30fps 的速度愉快地坐着。但是，如果我把它留在里面，FPS 计数器就会发疯。它上升到200FPS 300FPS，然后突然变为-200FPS -10FPS 0.01FPS。它完全不在墙上。while 循环每个"帧"可能只运行 10 次。

另请注意，硬编码值 5 和 6 只是检查在处理循环时是否经过了 5 或 6 毫秒（用于负载平衡）。

这仅仅是javascript无法处理大量信息还是其他人有类似的问题。

谢谢！

我真的不知道发生了什么，但我认为你应该使用局部变量来控制你的时间，不断重新评估counter并一次处理 1 条消息。另外，我不太明白最后一个循环（我还重命名了变量）：

_MainLoopHandler: function () {
  var start = new Date().getTime();
  var current;
  do {
    if (this._messages.length === 0) break;
    // process 1 message
    current = new Date().getTime();
  } while (current - start < 5);
}

您还可以将计时问题封装在对象（未显示）中以简化代码：

_MainLoopHandler: function () {
  var timing = new Timing();
  do {
    if (this._messages.length === 0) break;
    // process 1 message
  } while (timing.elapsed() < 5);
}
相关文章：