更新一個JavaScript對象全部更新它們

我有一個腳本可以在畫布上生成x個蝴蝶，我使用了一些適度原始的函數構造函數，以便可以修改每個蝴蝶而不會影響其他任何蝴蝶，但更新其中一個序列更新所有這些，我看不出爲什麼。更新一個JavaScript對象全部更新它們

由於代碼數量龐大（超過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所以你可以看到它工作（還有其他幾個更新），但代碼有點笨拙，因此我不會進入它。

來源

2013-04-08 Dave Mackintosh

對不起，小提琴的代碼掛在我的瀏覽器（FF21）。我不是在一臺特別快速的電腦上，但也許值得注意的是，這是否適用於公衆。 – K3N 2013-04-08 09:22:17

它僅針對iPad，似乎在所有的iPad和我的MacBook上都可以。我更新了鏈接，鏈接到了錯誤的版本。 – 2013-04-08 09:23:51

您應該1）在原型上設置函數，並在這些函數中使用'this'以避免內存浪費/使用閉包2）僅在'SequenceImage'類中存儲圖像一次。 3）使用requestAnimationFrame有一個流暢的動畫。我看到所有蝴蝶都在隨意移動，這是什麼問題？ – GameAlchemist 2013-04-08 09:59:35

正如在評論中已經提到的代碼很難閱讀。

但你問題最有可能的是在這裏：加載圖像時

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-08 12:20:48

有點戲劇性的迴應，代碼不是*那*壞，但我一直在尋找這個回調，看看是否是這個問題。 – 2013-04-08 12:26:54

因爲縮寫而不知道代碼的人很難閱讀。因爲它很難閱讀，所以看到錯誤並不容易。我關於乾淨重寫的建議是基於此，上面循環中的範圍界定的錯誤理解以及您設置原型的方式。我沒有更詳細地瞭解代碼，但是從這些問題出發，我認爲可以做一個乾淨的重寫，以避免更多的問題。 – 2013-04-08 12:35:55

雖然我不同意你的整個迴應，但潛在的問題是回調。我將序列的創建移到了蝴蝶構造函數中，現在甚至在序列的外部忽略了負載。你的前提是正確的，但迴應並不完全是建設性的。 – 2013-04-08 12:51:22

更新一個JavaScript對象全部更新它們

回答

相關問題