2

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 のみをアニメーション化します。単純な関数を使用すると問題なく動作しますが、個別に入力して実行できる自己満足のアニメーションオブジェクトが必要です。ありがとう。

4

1 に答える 1

2

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

var _this = this;

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

于 2012-03-01T15:10:48.367 に答える