JavaScript，setInterval() 超出其计时器工作答案

【问题标题】：JavaScript, setInterval() working beyond its timerJavaScript，setInterval() 超出其计时器工作
【发布时间】：2013-08-02 15:33:22
【问题描述】：

我有一个用setInterval() 调用的函数，如下所示：

canvasInterval = setInterval(updateCGoL, (1000/this.frameRate)|0);

我允许用户指定每秒帧数（有限制，在 parseInt() 之后只有非 NaN 值作为 Math.max(Math.min( 用户输入 , 30), 1)）。即使它以每秒 30 帧的速度运行，我也很确定它会在下一帧之前完成它的工作。我的问题是：

如果没有在规定时间内完成工作会发生什么我给的？
有没有办法测试它是否在下一次之前没有完成它的工作如果这是一个问题，框架？

编辑：（从 cmets 复制/粘贴）如果我的函数的限制是每秒 20 帧（用于计算）但我设置了以每秒 30 帧运行的 setInterval，它将改为以 20 帧运行? （相对于同时运行的两个函数）

【问题讨论】：

如果您正在制作动画..我建议您改用 requestAnimationFrame..请怜悯那个可怜的浏览器！！！
我从没听说过，有什么比setInterval()更好的地方？
听人们说，弥赛亚说怜悯。
我最近刚刚在英国皇家空军上给出了答案..给你链接！！！

标签： javascript setinterval

【解决方案1】：

Javascript 是单线程的，因此您对设置间隔的调用将被添加到队列中。它们将按顺序执行，但如果您的函数花费的时间比您的实际间隔长，您的工作将超出您的 setInterval 调用的预期完成时间。

【讨论】：

我想我可以在函数末尾使用setTimeout()，谢谢
@asimes 我认为setTimeout 不能替代 setInterval。
我的意思是把它放在函数的末尾，以便它调用自己。编辑：虽然这样不会是准确的帧速率，但没关系
@asimes 哦，喜欢recursion。
我想我可能在这里误解了一些东西，如果我的函数的限制是每秒 20 帧（计算）但我有 setInterval 以每秒 30 帧的速度运行，它会以每秒 20 帧的速度运行吗？ ? （相对于同时运行的两个函数）

【解决方案2】：

请改用 requestAnimationFrame。这不会占用您的 CPU。

简单来说，setInterval 不具备与我们的 cpu 交互的能力，并且不必要地最终使您的调用排队并浪费大量 cpu 周期

RequestAnimationFrame 运行良好，允许您在不增加浏览器负担的情况下控制帧速率。

我刚刚回答了一个类似的问题。

链接-->Replace setinterval by RAF

它包含初学者应该遵循的所有链接！！！

而不是清除间隔使用cancelAnimationFrame

只是一个关于你应该如何处理事情的sn-p。绝对是一个更好的解决方案。

// This makes sure that there is a method to request a callback to update the graphics for next frame
    requestAnimationFrame =
    window.requestAnimationFrame || // According to the standard
    window.mozRequestAnimationFrame || // For mozilla
    window.webkitRequestAnimationFrame || // For webkit
    window.msRequestAnimationFrame || // For ie
    function (f) { window.setTimeout(function () { f(Date.now()); }, 1000/60); }; // If everthing else fails


var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;//for cancellation
// some code here

var progress = 0

function doSomething(){
    if (progress != 100){
        // do some thing here
        var myAnimation = requestAnimationFrame(doSomething)      
    }else{
       // dont use clearInterval(interval) instead when you know that animation is completed,use cancelAnimationFrame().
       window.cancelAnimationFrame(myAnimation);
    }

【讨论】：

谢谢，学习一下。编辑：我将我的问题/评论复制/粘贴到 Blade0rz 到我的问题/帖子中。如果你能回答我会很高兴

【解决方案3】：

我不知道你的frameRate 是什么。如果它是由用户输入的，请在那里进行一些验证。所以你有更好的价值。

最好试试这个

var timeRate = this.frameRate? 1000/parseInt(this.frameRate) : 0;
canvasInterval = setInterval(updateCGoL, timeRate);

【讨论】：

...我解释说我正在验证它