Javascript objects with their own setInterval()?

Is i开发者_C百科t possible to make an object that has its own setInterval();

I have this code here http://jsfiddle.net/mLHJr/1/ with a global setInterval. I want to have multiple instances of the circle object and each own to have its own interval with different framerate.

Is that possible?

Thanks in advance

There are a variety of approaches. You can use one timer and have it call an update function for each object in an array or collection. Or you can create separate objects that call their own update function and have their own timer.

The first option is usually more efficient.

You have another issue though - if each circle has its own timer, you can't just re-draw the entire canvas each time as you are doing now. If you do, then each time it re-draws one ball it will delete the others so it will flicker between them. You can fix that by having the ball delete only itself before redrawing itself in the new location - but then you have to deal with overlapping balls.

So the best approach is one timer that re-draws all the balls each time in sequence so the ones "on top" always overlap the ones underneath.

You can have as many setIntervals as you want. But the more you have, the worse for the performance. Why do you need more than one?

Having only one that draws the frames is normally good enough. Create an array if circles and on each invocation of the handler, you iterate over that array and draw the circles.

Even better would probably be to use setTimeout.

http://jsfiddle.net/mLHJr/5/

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var speed = 10;
var xv = 2;
var yv = 1;
var gravity = 2;
var circlex = 30;
var circley = 30;
var friction = 0.95;

var circle = {
    draw: function(x, y, r) {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
    }

};

function setCircleInterval(frames) {
    var c = this;
setInterval(function() {
    ctx.clearRect(0, 0, 200, 200);

    speed = speed * friction;

    if (speed < 0.01) {
        speed = 0;
    }

    yv += gravity;

    circlex += xv * speed;
    circley += yv * speed;

    if (circley >= 195) {
        circley = 195;
        yv *= -1;
    }

    if (circlex >= 195) {
        xv *= -1;
        circlex = 195;
    }

    if (circlex <= 5) {
        xv *= -1;
        circlex = 5;

    }
    c.draw(circlex, circley, 10);   
}, frames);
}


circle.setInterval=setCircleInterval;
circle.setInterval(1000 / 60);

Each timer set up using setInterval() has a unique id which is returned by that function. Store that id in a member variable of your object to associate it with that timer:

circle1.timerId = setInterval( func, time );
circle2.timerId = setInterval( func, time );
...

You can cancel each timer later by passing the timerId to clearInterval():

clearInterval( circle1.timerId );
clearInterval( circle2.timerId );
...

Of course it is better to setup some member functions in your class to perform these operations.