CODEWITHSUNDEEP
javascriptsetinterval
asimes
asimes

Reputation: 5894

JavaScript, setInterval() working beyond its timer

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:

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)

Upvotes: 1

Views: 169

Answers (3)

HIRA THAKUR
HIRA THAKUR

Reputation: 17757

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

Upvotes: 2

Praveen
Praveen

Reputation: 56509

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

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78535

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.

Upvotes: 3

Related Questions