Javascript объекты со своим собственным setInterval ()?

Question

Можно ли сделать объект, который имеет свой собственный setInterval ();

У меня есть этот код здесь http://jsfiddle.net/mLHJr/1/ с глобальным setInterval.Я хочу иметь несколько экземпляров объекта круга и каждый из них иметь собственный интервал с различной частотой кадров.

Возможно ли это?

Заранее спасибо

Answer 1

Существует множество подходов.Вы можете использовать один таймер и заставить его вызывать функцию обновления для каждого объекта в массиве или коллекции.Или вы можете создавать отдельные объекты, которые вызывают свои собственные функции обновления и имеют собственный таймер.

Первый вариант обычно более эффективен.

У вас есть еще одна проблема - если у каждого круга есть свой таймер, вы не можете просто перерисовывать весь холст каждый раз, как вы это делаете сейчас.Если вы это сделаете, то каждый раз, когда он перерисовывает один шар, он удаляет остальные, поэтому он будет мерцать между ними.Это можно исправить, удалив шарик только самого себя перед перерисовкой на новом месте - но тогда вам придется иметь дело с перекрывающимися шариками.

Таким образом, лучший подход - один таймер, который перерисовывает все шары каждыйвремя в последовательности, поэтому «сверху» всегда перекрывают нижние.

Answer 2

Вы можете иметь столько setIntervals, сколько хотите.Но чем больше у вас есть, тем хуже для производительности.Зачем тебе больше одного?

Обычно достаточно одного, который рисует кадры.Создайте массив, если круги и при каждом вызове обработчика вы перебираете этот массив и рисуете круги.

Еще лучше, вероятно, использовать setTimeout.

Answer 3

Каждый таймер, настроенный с помощью setInterval(), имеет уникальный идентификатор, который возвращается этой функцией.Сохраните этот идентификатор в переменной члена вашего объекта, чтобы связать его с этим таймером:

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

Вы можете отменить каждый таймер позже, передав значение timerId в clearInterval():

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

Конечно, лучше настроить некоторые функции-члены в вашем классе для выполнения этих операций.

Answer 4

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