javascript - 无法获得正确的经过时间

Question

我正在尝试在 JavaScript 中制作一个计时器，以便在 WebGL 中制作动画。这是使用 Date 类获取经过时间的代码。

var lastTime = Date.now();
var elapsed = 0;
var timeNow = Date.now();
function animate() {
    timeNow = Date.now();
    if(timeNow > lastTime) {
        elapsed = timeNow - lastTime;
        console.log(elapsed);
    }

    lastTime = timeNow;
} 

从 window.requestAnimationFrame() 回调调用 Animate。但这似乎产生了 16 到 17 之间的值。它永远不会超过 20。这是怎么回事？

编辑：实际上，那是我的错误。Elapsed 必须是 += 而不是 =。感谢抽象算法解释为什么它在 16 到 17 之间。:)

Answer 1

您animate每秒调用 60 次，因为这可能是您设置的requestAnimationFrame（并且默认设置）。1000 毫秒/60 帧 = 16.xx 毫秒。所以动画每 16 毫秒调用一次，这就是你得到的。

if ( !window.requestAnimationFrame ) {

window.requestAnimationFrame = ( function() {

    return window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

        window.setTimeout( callback, 1000 / 60 );   // so call it every ~16ms

    };

} )();

}