1

我有一个脚本可以在画布上生成 x 数量的蝴蝶，我正在使用一些适度原始的函数构造函数，以便可以修改每只蝴蝶而不影响其他任何蝴蝶，但是在更新其中一个序列时它会更新所有这些并且我看不到为什么。

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

您可以在此处完整查看所有内容。

但由于我不能只发布 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，因此您可以看到它正在工作（还有其他几个更新），但是代码有点笨拙，因此我不会深入讨论。

4

1 回答 1

0

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

但是您的问题很可能在这里：

    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的状态和图像。我无法告诉您为什么其余代码似乎可以工作，我真的没有时间调试您的代码。我的建议是阅读有关范围和闭包的信息并进行干净的重写，因为我认为还有更多这样的问题。

编辑 一个修复可能是将序列作为参数传递：

// 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));
};

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

于 2013-04-08T12:20:48.797 回答