函数调用与requestAnimationFrame之间的时间间隔变化

我尝试使用requestAnimationFrame为JPG图像序列创建动画，但是我注意到某些时候在某些帧上需要更长的时间。如果你运行这个当控制台打开时，你会看到，每个调用之间的毫秒的差异是不一样的https://jsfiddle.net/bhenqfbw/函数调用与requestAnimationFrame之间的时间间隔变化

：

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

var start; 
var i=0; 
var animateLoop = function() { 

    if(i>500) { 
     return false; 
    } 
    i++; 
    requestAnimFrame(animateLoop); 
    var _start = start; 
    start = +new Date(); 
    console.log("Iteration:"+i, "Milliseconds Diff: "+(start-_start)); 
    } 

animateLoop();

为了详细说明，请看看这个小提琴。在我改变图像源的情况下，波动更大。

有没有一种方法可以使其保持不变或只需要这样？

来源

2015-04-08 Sohail

嗯......你不是在一个实时的环境中运行。这个是正常的。 – Cameron

那么的重点是让浏览器决定何时再次调用该函数。它为此进行了优化。所以这是最好的选择。但是，如果你真的想要一些不在乎功能是否完成被称为setInterval的东西是你的朋友（我的意思是敌人，因为它很糟糕）。或者：

function toCall(){ 
    //do stuff 
    setTimeout(toCall); //Place this at the end of your function. And no second parameter needed. It'll be called whenever the stack is empty. 
}

来源

2015-04-08 13:56:31

这也不会使它更准确。最近做了一些测试 - 一个17ms循环超时的30个图像帧（类似于普通的显示器刷新率）达到了总共700多个... – Shikkediel

就像我说过的那样'requestAnimationFrame'是他的最佳选择。这也取决于他在'animateloop'函数中做了多少工作或他的工作。 –

那里没有任何争论，只是想分享最近的调查结果。日志*相当有趣。多200多个持续时间，但也有一些也在10毫秒以下。没有这些似乎是相关的。所以碰到时间比显示刷新速度快得多，这很奇怪。 – Shikkediel

不是基于时间的。你应该使你的动画时间为基础，而不是框架。

基本上，如果你想用一个常数值改变一个元素的位置，并且你没有固定的帧速率，你可以使用帧之间的时间差来计算每帧中的距离。

这里的主要思路：（看看控制台） https://jsfiddle.net/bhenqfbw/1/

来源

2015-04-08 14:42:00

函数调用与requestAnimationFrame之间的时间间隔变化

回答

相关问题