0

我有一个这样调用的函数setInterval()：

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

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

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

编辑：（从评论中复制/粘贴）如果我的函数的限制是每秒 20 帧（计算）但我设置了以每秒 30 帧运行的 setInterval，它会改为以 20 帧运行吗？（与同时运行的两个函数相反）

4

3 回答 3

2

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

于 2013-08-02T07:09:07.220 回答
2

改用requestAnimationFrame ..这不会占用你的 CPU。

简而言之，setInterval 无法与我们的 cpu 交互，并且不必要地最终使您的调用排队并浪费大量 cpu 周期

RequestAnimationFrame 可以巧妙地工作，并允许您在不增加浏览器负担的情况下操纵帧速率。

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

LINK-->用 RAF 替换 setinterval

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

而不是清除间隔使用cancelAnimationFrame

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

// 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);
    }
于 2013-08-02T07:18:35.317 回答
0

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

最好试试这个

var timeRate = this.frameRate? 1000/parseInt(this.frameRate) : 0;
canvasInterval = setInterval(updateCGoL, timeRate);
于 2013-08-02T07:13:43.050 回答