從異步調用訪問另一個對象原型的對象

Question

我有一個異步調用，當它完成時，我想在父級上設置一個屬性。

採取以下類，貓：

var cat = function(){ 
    this.isLoaded = false; 
    this.image = new Image(); 
    this.image.onload = function(){ 
    //how can I set the isLoaded variable above from here?? 
    } 
    this.image.src = "..."; 
} 

我希望能夠做到：

var myCat = new cat(); 
if(myCat.isLoaded) 
.... 

我似乎無法弄清楚如何設置上述從onload事件中的isLoaded屬性。我可以通過只是做'isLoaded'來訪問它，但我認爲我是通過價值訪問它，而不是參考，因此不能改變它。

這似乎是一個簡單的解決方案，我想我缺乏更深入的瞭解。

謝謝！

Answer 1

在onload回調中，isLoaded是undefined，如果你設置它，它將是window.isLoaded（本質上是一個全局）。

該回調的this也指向img元素，而不是其父功能。我做了一個that變量，指向外部函數的this。函數中的函數可以在JavaScript中訪問其外部函數的作用域。

var Cat = function(){ 
    this.isLoaded = false; 
    this.image = new Image(); 
    var that = this; 
    this.image.onload = function(){ 
    that.isLoaded = true; 
    } 
    this.image.src = "http://www.gravatar.com/avatar/5e28492984e3056904e295c43337655f?s=32&d=identicon&r=PG"; 
} 

var c = new Cat(); 

console.log(c.isLoaded); // false 

setTimeout(function() { console.log(c.isLoaded) }, 1500); // true 

jsFiddle。

當然，setTimeout()僅用於此示例。如果你正在加載圖片，你應該依靠回調，因爲唯一的另一種方式來確定圖片是否加載是通過輪詢 - 不是一個很好的界面。

你應該提供一個發生在一個回調來傳遞，所以你可以做...

var c = new Cat(function() { 
    // Image loaded, proceed. 
}); 

Answer 2

就像@alex說你需要引用你的貓對象。

但是，如果你的互聯網連接不好setTimeout不會幫你很多。 下面是使用回調功能代替的setTimeout

var cat = function (callback) { 
    var this_cat = this; 
    this.isLoaded = false; 
    this.image = new Image(); 
    this.image.onload = function(){ 
    //how can I set the isLoaded variable above from here?? 
    this_cat.isLoaded = true; 
    if (callback instanceof Function) { //@alex tip: callback instanceof Function is more accurate. Chrome reports the regex literal is a function. 
     callback(); 
    } 
    } 
    this.image.src = "/images/stand_logo.png"; 
} 

var myCat = new cat(function() { 
    console.log('cat loaded'); 
});