Return a variable from a Javascript function

Question

How can I access the value of imgWidth? This is giving me undefined.

somejQueryMethod(function() { 
    var imgWidth;
    $("<img/>").attr(
        "src", 
        $("#SomeImgSelector").attr("src")
    ).load(function() {
        imgWidth = this.width;
    });
    // use imgWidth here
    // imgWidth is undefined here
});

Background info: From this SO question I assumed that as imgWidth was being defined outside of the load() method, it would always be available outside of load(). Which makes me wonder why define imageWidth there and not in load()?

You have to wait until the $.load() callback runs, which means you need the callback to use imgWidth (basically, where you've set the variable). $.load() is asynchronous, which means it allows the code to continue while it works. — Jared Farrish
– Jared Farrish, Commented Aug 19, 2012 at 21:23

Guffa · Accepted Answer · 2012-08-19 21:21:29Z

7

You can't use the value there, because it doesn't exist yet. The callback function in the load command runs after the content has been loaded, and that happens after the function using the load command ends.

Put the code that needs the value inside the callback function for the load command:

...somejQueryMethod(
    function() { 
        var imgWidth;
        $("<img/>").attr("src", $("#SomeImgSelector").attr("src")).load( function() {
          imgWidth = this.width;
          // use imgWidth here
        } );
    }
);

answered Aug 19, 2012 at 21:21

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

Comments

eis · Accepted Answer · 2012-08-19 21:29:54Z

Your question doesn't make a lot of sense to me. You cannot use it there as it doesn't have a value yet - you should use it within or after the load handler function when it has been defined.

Edit: just to add, take a moment to think what you're doing there. When you're changing the src attribute, you're telling it to load an image from some url. Then, you're attaching a load event to trigger (when it has done loading) to capture the width of the loaded image. Now, of course you cannot use that value until the code has done loading the image. Here you're using asynchronous loading, which in practice means that your code will be processed to the end and loading will happen "in the meantime", so it will not wait for that loading of image to complete. If you want to, you could also change your code so that it will actually wait for it to complete, or you can play around with the width in the load handler, as others have demonstrated.

imgWidth is defined there, it just has a value of undefined. So yes, it should be used within the load handler or in some other function called from within the load handler.
@nnnnnn right. I fixed that. It is defined, but it doesn't have a value yet (beyond undefined).

Tim B James · Accepted Answer · 2012-08-19 21:24:05Z

3

The load function is asynchronous, which means that you will need to provide all the functionality within the callback function.

somejQueryMethod(function() {         
    $("<img/>").attr(
        "src", 
        $("#SomeImgSelector").attr("src")
    ).load(function() {
        var imgWidth = this.width;
        // use imgWidth here
    });
});

answered Aug 19, 2012 at 21:24

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

Collectives™ on Stack Overflow

Return a variable from a Javascript function

3 Answers 3

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Linked

Related