javascriptで同じコンストラクタを持つオブジェクト内でsetIntervalを同時に複数呼び出す

Question

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をアニメーション化されていますベローは、私が達成しようとしているものの一例です。シンプルな関数を使用するとうまくいきますが、私はセルフコンテンツアニメーションオブジェクトを必要とします。ありがとう。

Answer 1

_thisを定義すると、varが見つかりませんでした。これがなければ、グローバル変数であり、次の新しいオブジェクトで上書きされます。

var _this = this; 

を修正する必要があります。