Access an object on another objects prototype from an asynchronous call

Question

I have an async call that, when it completes, I want to set a property on the parent.

Take the following class, 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 = "...";
}

I want to be able to do:

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

I cant seem to figure out how to set the isLoaded property above from within the onload. I can access it by just doing 'isLoaded' but I think I am accessing it by value, not reference, and thus cant change it.

This seems like an easy solution, I guess I lack the deeper understanding.

Thanks!

alex · Accepted Answer · 2011-03-16 07:39:36Z

3

Inside the onload callback, isLoaded is undefined, and if you set it, it will be window.isLoaded (essentially a global).

The callback's this too points to an img element, not its parent function. I made a that variable that points to the outer function's this. Functions in functions have access to their outer function's scope in 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.

Of course, the setTimeout() is used for this example only. If you are loading an image, you should rely on callbacks, because the only other way to determine if the image has loaded is by polling - not a very good interface.

You should provide a place to pass in a callback, so you can do...

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

edited Mar 16, 2011 at 7:39

answered Mar 16, 2011 at 7:26

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steve Over a year ago

ok so to make sure I understand this correctly - a function in a function has access to the outer function/objects 'local/private' variables (declared via var a) and not the objects attached to the function itself? (via this.a)

alex Over a year ago

@Steve It has access to its parent scope, but the value of this changes, so you need a reference.

Dmytro Evseev · Accepted Answer · 2011-03-16 07:44:35Z

1

Like @alex said you need to reference your cat object.

But if your internet connection is poor setTimeout won't help you much. Here is an example to use callback functionality instead of 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');
});

edited Mar 16, 2011 at 7:44

answered Mar 16, 2011 at 7:32

Dmytro Evseev

11.6k3 gold badges36 silver badges49 bronze badges

2 Comments

alex Over a year ago

I used setTimeout() only for this example.

alex Over a year ago

To determine if a callback is a function, callback instanceof Function is more accurate. jsFiddle -> Chrome reports the regex literal is a function.

Collectives™ on Stack Overflow

Access an object on another objects prototype from an asynchronous call

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related