setIntervalを使用して異なる速度の複数のアニメーションオブジェクトを同時に作成し、同じコンストラクタで生成する必要があります。私が直面している問題は、2つ以上のオブジェクトを作成した後、setIntervalに渡されたオブジェクトのメソッドは、常に最後に作成されたオブジェクトへの参照を持つということです。javascriptで同じコンストラクタを持つオブジェクト内で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をアニメーション化されていますベローは、私が達成しようとしているものの一例です。シンプルな関数を使用するとうまくいきますが、私はセルフコンテンツアニメーションオブジェクトを必要とします。ありがとう。
可能な複製http://stackoverflow.com/questions/1451009/javascript-infamous-loop-problem –