одновременные множественные вызовы setInterval внутри объектов с одним и тем же конструктором в JavaScript - PullRequest
Новая
       29

одновременные множественные вызовы setInterval внутри объектов с одним и тем же конструктором в JavaScript

2 голосов
/ 01 марта 2012

Мне нужно создать несколько одновременно анимированных объектов с разными частотами скорости, используя setInterval и сгенерированных одним и тем же конструктором. Проблема, с которой я сталкиваюсь, заключается в том, что после создания 2 или более объектов метод объекта, передаваемый в setInterval, всегда имеет ссылку на последний созданный объект. Ниже приведен пример того, чего я пытаюсь достичь: 

function obj(s){
    this.speed = s;
    this.colors = ["FF0000","FF3300","FF6600","FF9900","FFCC00","FFFF00","FFCC00"];
    _this = this;
    this.counter = 0;

    this.genDiv = function(){
        this.div = document.createElement('div');
        this.div.style.width = 100 + "px";
        this.div.style.height = 100 + "px";
        document.body.appendChild(this.div);
        setInterval(function(){_this.div.style.backgroundColor =  "#" + _this.colors[_this.globalCounter()]}, _this.speed);
    };

    this.globalCounter = function(){
        if(this.counter <= (this.colors.length-1)){
            return this.counter++;
        }else{
            this.counter = 1;
            return 0;
        }
    };
}

window.onload = start;

function start(){
    var a = new obj(1000);
    var b = new obj(2000);
    a.genDiv();
    b.genDiv();
}

После запуска этого кода оба вызова setIntervals анимируют только объект b. Используя простые функции, все работает нормально, но я хочу, чтобы анимированные объекты содержали себя самостоятельно, которые можно заполнять и запускать независимо. Спасибо.

1 Ответ

2 голосов
/ 01 марта 2012

Вы пропустили var при определении _this.Без него это глобальная переменная и перезаписывается следующим новым объектом. 

var _this = this;

должно исправить это.

...