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, Aug 19 '12 at 21:23

score 7 · Accepted Answer · answered Aug 19 '12 at 21:21

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
        } );
    }
);

eis · Answer 2 · 2012-08-19T21:29:54.050

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, Aug 19 '12 at 21:28
@nnnnnn right. I fixed that. It is defined, but it doesn't have a value yet (beyond undefined). — eis, Aug 19 '12 at 21:31

score 3 · Answer 3 · answered Aug 19 '12 at 21:24

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
    });
});

Return a variable from a Javascript function

3 Answers3