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/

范围问题与fadeIn的序列

1 个答案: