在javascript中同时调用具有相同构造函数的对象内部的setInterval

Question

我需要使用setInterval创建多个具有不同速度频率的同时动画对象，并由同一构造函数生成。我面临的问题是，在创建2个或多个对象后，传递给setInterval的对象的方法总是引用最后创建的对象。Bellow就是我努力实现的一个例子：

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;

应该修复它。