javascript - 淡入序列的范围问题

Question

在以下代码中，我有一个带有 x3 LI 的 UL。我希望 LI 按顺序淡入，但我认为我正在失去范围。问题是只运行序列中的最后一项。我最初认为这与循环有关，所以我删除了所有这些。任何帮助都会很棒。

谢谢提前。

function Sequence() {
    var sequence = [];
    var pos = 0;

    Sequence.prototype.add = function(obj) {
        sequence.push(obj);
    };

    Sequence.prototype.start = function() {
        sequence[pos].run();
    };

    Sequence.prototype.next = function() {
        pos++;
        sequence[pos].run();
    }; 
};

function fadeIn(params) {
    this.id = params.id;
    this.onComplete = params.onComplete;

    var self = this;
    var timer;
    var i = params.opacity;

    fadeIn.prototype.run = function(){
        timer = setInterval(function() {
            params.element.style.opacity = i / 10;
            i++;

            if (i / 10 == 1) {
                clearInterval(timer);
                self.onComplete();
            }
        }, params.fps);
    }
};

var sequence = new Sequence();
var fader = document.getElementById('fader1');
var items = fader.getElementsByTagName("li");

sequence.add(new fadeIn({
    "id": "instance_0",
    "element": items[0],
    "opacity": 0,
    "fps": 80,
    "onComplete": function() {
        sequence.next();
    }
}));

sequence.add(new fadeIn({
    "id": "instance_1",
    "element": items[1],
    "opacity": 0,
    "fps": 80,
    "onComplete": function() {
        sequence.next();
    }
}));

sequence.start();

Answer 1

是的，这是一个范围问题。问题在于:

fadeIn.prototype.run = function(){

当您在原型(prototype) 上定义方法时，您是在fadeIn 类的所有 实例上定义该方法。因此，每次调用构造函数时，都会在闭包中使用新的 params 重新定义方法。

解决方案是在this(或者，如您重命名的self)上定义方法，这是新实例，而不是类:

self.run = function(){

这里的工作示例:http://jsfiddle.net/nrabinowitz/wrQMa/3/