jQuery: how to access outside variable?

Question

I am in a situation that needs be solve with this way; need convert a local variable to a global variable. There is an example returning image's real width and height which i found these method from this answer..

Need to convert local varialbes pic_real_height and pic_real_width to global variables with returning their true values.

Here is jsFiddle.

CSS :

img { width:0px; height:0px; }

jQuery :

console.log($('.imgCon img').height());//returns 0

var img = $('.imgCon img')[0]; // Get my img elem
var pic_real_width, pic_real_height;
$('<img/>').attr('src', $(img).attr('src')).load(function() {
        pic_real_width = this.width;   
        pic_real_height = this.height;

        console.log( pic_real_width + 'x' + pic_real_height );
        // -- returns true 570x320 --
});
//problem starts here:
console.log( pic_real_width + 'x' + pic_real_height );
//returns undefined
// need to return this as an global variable 570x320

They are already global, but the load happens asynchronous. Just move the alert in the callback function — Bergi, Aug 04 '12 at 21:03
Please learn to use `console.log()` instead of `alert()`, mainly by testing in Chrome, Firefox (with Firebug), or IE9. — Jared Farrish, Aug 04 '12 at 21:04
As @Bergi said as well, a *callback* is called by `$.load()` (see the `function` part?) in which it's called, and literally this occurs *later on*. You need to learn how callbacks work. — Jared Farrish, Aug 04 '12 at 21:06
@Bergi need to call them from outside of callback function /: — Barlas Apaydin, Aug 04 '12 at 21:06
You can call them outside the callback function. Your problem is that `.load()` does not stop executing js code. so if you want to do anything with those variables you must wait until they are set by the callback function. — Zefiryn, Aug 04 '12 at 21:10
You don't explain what you really want to do with these variables, you are just `alert`ing them, so we cannot really suggest what you should be doing. — Felix Kling, Aug 04 '12 at 21:22
@JaredFarrish thanks for notice, i updated my question with console.log. — Barlas Apaydin, Aug 04 '12 at 21:24
That's a minor (but *useful* for you) improvement. You really need to learn about callbacks and how they work. But the name, they *wait*. For...? — Jared Farrish, Aug 04 '12 at 21:28
@Bergi please submit your answer as an answer instead of a comment — dsh, Aug 04 '12 at 21:29
The title of the question should be edited. Can somebody, good with words, do that ? — Jashwant, Aug 04 '12 at 21:36
@dsh: I don't think it is long enough to be an answer (and also has just earned me a badge :-). I'd rather close the question as a duplicate, but I fear there is still no answer-to-all-async-stuff question... — Bergi, Aug 04 '12 at 21:51

score 2 · Accepted Answer · answered Aug 04 '12 at 21:28

This line,

console.log( pic_real_width + 'x' + pic_real_height );

does not wait for these lines

    pic_real_width = this.width;   
    pic_real_height = this.height;

    console.log( pic_real_width + 'x' + pic_real_height );
    // -- returns true 570x320 --

to execute, because its asynchronous.

Thus, console.log( pic_real_width + 'x' + pic_real_height ); executes before callback function gets called (i.e. before you set the width and height ).

Since, you havent defined them already, they show undefined.

A trivial solution would be,

$('<img/>').attr('src', $(img).attr('src')).load(function() {
        pic_real_width = this.width;   
        pic_real_height = this.height;

        console.log( pic_real_width + 'x' + pic_real_height );
        // -- returns true 570x320 --
        restOfMyProcessing();

}); 

function restOfMyProcessing() {
    console.log( pic_real_width + 'x' + pic_real_height );
}

You're welcome but please do read about the asynchronous nature of js and the callbacks associated with that. One day, you will be doing ajax calls. — Jashwant, Aug 04 '12 at 21:55

score 0 · Answer 2 · answered Aug 04 '12 at 21:41

You try to use pic_real_width and pic_real_height before they set in image load event.
Like in your code, first alert( pic_real_width + 'x' + pic_real_height ) is the one after image load function which returns undefined and the second alert in load event returns what you expect.
Although it's better to move setting of source attribute after load function/event:

$('<img/>')
.load(function() {
    pic_real_width = this.width;
    pic_real_height = this.height;

    alert( pic_real_width + 'x' + pic_real_height );
    // -- returns true 570x320 --
    //now continue process here or call another function...
})
.attr('src', $(img).attr('src'));

jQuery: how to access outside variable?

2 Answers2

Linked