范围问题与fadeIn的序列有关

如何解决范围问题与fadeIn的序列有关

| 在以下代码中，我具有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],\"onComplete\": function() {
        sequence.next();
    }
}));

sequence.start();

    

解决方法

是的，这是一个范围问题。问题出在行中：

fadeIn.prototype.run = function(){

在

prototype

上定义方法时，您正在\3ѭ类的所有实例上定义方法。因此，每次调用构造函数时，都将在闭包中使用新的

params

重新定义方法。 解决方案是在新实例而不是类上，在ѭ5as（或已将其重命名为

self

）上定义方法。

self.run = function(){

此处的工作示例：http://jsfiddle.net/nrabinowitz/wrQMa/3/