JavaScript, setInterval() working beyond its timer

Question

I have a function that gets called with setInterval() like this:

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

I am allowing the user to specify the frames per second (with limitations, only non-NaN values after parseInt() as Math.max(Math.min( user input , 30), 1)). Even if it runs at 30 frames per second I am pretty sure it is completing its work before the next frame. My questions though are:

What happens if it does not finish its work within the amount of time I gave it?
Is there a way to test if it did not finish its work before the next frame if this is a problem?

Edit: (Copy / pasted from comments) If the limit of my function is 20 frames per second (to compute) but I have setInterval running at 30 frames per second will it instead run at 20? (As opposed to two functions running at the same time)

if you are doing an animation..i would suggest you to use requestAnimationFrame instead..Please have some mercy on that poor browser!!! — HIRA THAKUR, Aug 02 '13 at 07:06
I've never heard of that, what makes it better than `setInterval()`? — asimes, Aug 02 '13 at 07:08
i just gave an answer on RAF recently..just give you the link!!! — HIRA THAKUR, Aug 02 '13 at 07:09

score 2 · Accepted Answer · answered Aug 02 '13 at 07:09

2

Javascript is single-threaded, so your calls to set interval will be added to a queue. They will execute sequentially, but if your functions take longer than your actual interval you will work beyond the expected finish time of your setInterval calls.

answered Aug 02 '13 at 07:09

CodingIntrigue

75,930
30
170
176

I guess I could use `setTimeout()` at the end of the function then, thank you – asimes Aug 02 '13 at 07:16
@asimes I think `setTimeout` can't be a replacement for setInterval. – Praveen Aug 02 '13 at 07:19
I meant putting it at the end of the function so that it calls itself. **Edit**: Although then it would not be an accurate frame rate, never mind – asimes Aug 02 '13 at 07:20
@asimes Oh, like `recursion`. – Praveen Aug 02 '13 at 07:21
I think I may be misunderstanding something here, if the limit of my function is 20 frames per second (to compute) but I have `setInterval` running at 30 frames per second will it instead run at 20? (As opposed to two functions running at the same time) – asimes Aug 02 '13 at 07:29

score 2 · Answer 2 · edited May 23 '17 at 10:31

Use requestAnimationFrame instead..This will not hog your cpu.

In simple words,setInterval does not have the ability to interact with our cpu and unnecessarily it ends up making queues of your calls and wasting a lot of cpu cycles

RequestAnimationFrame works smartly and allows you to manipulate the frame rate without burdening yor browser.

I just answered a similar question.

LINK-->Replace setinterval by RAF

It has all the links a begineer should follow!!!

Instead of clearing the interval use cancelAnimationFrame

Just a snippet on how you should approach things.Definately a better solution.

// 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);
    }

Thank you, I'll see about learning it. **Edit**: I copy / pasted my question / comment to Blade0rz to my question / post. I'd be happy if you could answer it — asimes, Aug 02 '13 at 07:32

score 0 · Answer 3 · answered Aug 02 '13 at 07:13

0

I don't know about what's your frameRate. If it is entered by user, do some validation there. so you have better value.

Better try this

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

answered Aug 02 '13 at 07:13

Praveen

55,303
33
133
164

...I explained that I am validating it – asimes Aug 02 '13 at 07:17

JavaScript, setInterval() working beyond its timer

3 Answers3