Question

我有一个在画布上生成x个蝴蝶的脚本，我正在使用一些中等原始的函数构造函数，这样每个蝴蝶都可以在不影响任何其他蝴蝶的情况下进行修改，但是在更新其中一个序列时它会更新所有蝴蝶和我完全不明白为什么。

由于代码量很大（超过350行），我创建了一个JS fiddle来查看（可能不赞成）

您可以全部查看here。

但由于我不能只发布一个指向JSFiddle的链接，这里是序列函数本身的代码。

function Sequence (s, f) {
    // Check we have arguments
    if (!s || !f) {
        throw new TypeError('No sequences to load');
    }

    // Instance for the onload event
    var _sq  = this;

    // Some public properties
    this.w  = 0;
    this.r  = false;
    this.st = 0;
    this.ns = 22;

    // This is the step in the sequence we're at
    this.s  = 20;

    // The step width
    this.sw = 0;

    // Create the image
    this._s = new Image;
    this._f = new Image;

    // Load listener 
    this._s.onload = function () {
        // Set our publics
        _sq.w = this.width;
        _sq.sw = _sq.w / fps;
    };

    this._s.src = s;
    this._f.src = f;

    // Return
    return this;
};

[编辑] 我已经更新了序列类，基本上不关心负载，无论如何使用

进行预取

<link rel="prefetch" href="image.png" />

我还更新了JSFiddle，因此你可以看到它正常工作（还有其他几个更新）但代码有点笨拙，因此我不会进入它。

Answer 1

正如评论中已经提到的那样，代码难以阅读。

但你最有可能的问题是：

    for ( ; i < no_of_butterflies; i++) {
        // Create the sequence
        var s = new Sequence('http://ok5.com/blue-walking.png', 'http://ok5.com/blue-flying-2.png');

        // Listen to the load
        s.loaded = function() {
            bs.push(new Butterfly(s));
        };

        // Load the beast up
        s.load();
    }

加载图像时调用s.loaded回调。因此，对于你们所有的蝴蝶，你们都拥有相同的Sequence，并且在你拍摄状态和图像的序列之外。我不能告诉你为什么其余代码似乎工作，我没有时间调试你的代码。我的建议是阅读有关范围和闭包并进行干净的重写，因为我认为还有更多类似的问题。

修改修复可以是将Sequence作为参数传递：

// If we have a loaded listener, fire it if (_sq.loaded) { _sq.loaded(_sq); }

将回调更改为：

// Listen to the load s.loaded = function(s) { bs.push(new Butterfly(s)); };

但你必须检查一下是否正常工作。

更新一个JavaScript对象会全部更新它们

1 个答案: