Question

我有一个异步调用，当它完成时，我想在父节点上设置一个属性。

参加以下课程：cat：

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一样，你需要引用你的cat对象。

但如果您的互联网连接不佳，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');
});

从异步调用访问另一个对象原型上的对象

2 个答案: