Question

我似乎在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);
    };
})();

Heartbeat只是一个包含帧速率信息的对象。

* 以下是我的问题：*

_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无法处理信息量或其他任何人遇到类似问题。

谢谢！

Answer 1

我真的不知道发生了什么，但我认为您应该使用局部变量来控制时间，不断重新评估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);

}

Javascript setTimeout和帧速率

1 个答案: