changing global variable value inside a callback

[regicidedelferoz]

good day everyone,

 

i have a problem regarding changing a global variable inside a callback function. for you to visualize my problem, here's my code:

<script>var imgWidth;$(function(){     $('img').attr('src', 'http://domain.com/link-to-new-image-src.jpg').load(function(){          window.imgWidth = $(this).width();          console.log(window.imgWidth); //outputs the size of the new image     });     console.log(imgWidth); //outputs "undefined" which is my problem});</script>

hope you get it

 

 

thank you in advance and more power- regicide

[thescientist]

good day everyone,

 

i have a problem regarding changing a global variable inside a callback function. for you to visualize my problem, here's my code:

<script>var imgWidth;$(function(){     $('img').attr('src', 'http://domain.com/link-to-new-image-src.jpg').load(function(){          window.imgWidth = $(this).width();          console.log(window.imgWidth); //outputs the size of the new image     });     console.log(imgWidth); //outputs "undefined" which is my problem});</script>

hope you get it

 

 

thank you in advance and more power- regicide

I'm not sure what the problem is.

 

imgWidth will be undefined as you have written in it. jQuery runs the load method on the image, and inside the callback you get the value you want. While that is happening, javascript goes to the next line of code and executes it.

 

All you need to do it execute the code you want that relies on imgWidth inside the load method's callback function (where you already getting the value you want).

[Hadien]

The problem is that console.log(imgWidth); is not inside the load call, so its running instantly and the load call will run later when the image loads. so right now, imgWidth is still undefined when that console is running.

 

javascript doesn't run a function as soon as it's spotted. it looks at all the functons in the scope first (which weren't defined literally) and makes sure its closed correctly then it starts at the top and moves down. Javascript only goes back to that function actually look and runs whats inside it when something tells it to (in this case thats the img onload event).

so at the highest level it'll see

var imgWidth;$(blah blah)

it sees no function definition so it works from top down, declaring imgWidth and then running the jQuery function. So inside this $() function it first looks for function declarations then starts top down. At this scope level that's just the anonymous function (){blah blah} so it makes note of it at this scope and then $() will force it to run immediately so Javascript now moves inside this anonymous function:

$("img").load(function (){blah blah));console.log(imgWidth);

in this scope it 1st checks for all functions not defined literally (the load function wasn't defined literally, but its defined inside another scope so javascript doesn't see it yet) and finds nothing so it works top down again. on the first line it finds theres is an onload function that was defined. right now it just remembers that there is a function there but doesn't actually worry about it until someone needs to use it (when the img loads) so then it moves on the console.log(). Well at this point the onload function hasn't run yet so when it runs the console.log imgWidth is still undefined.

 

then some time later (however short it is) that image finishes loading and then fires the onload event for that img. then javascript will actually look inside that load function to do whats inside of it.

[regicidedelferoz]

thank you guys. now I understand that JavaScript reads first the console.log() feature before the .load() function of the image. i thought .load() function will be called first before console.log() because of their order (line numbers). now I realized that .load() function will only be executed after the image was loaded and the console.log() will be executed even though the image is not yer loaded. it's like the idea of $(document).ready() and $(window).load() function.

 

thank you guys. i'm enlightened

God bless and more power!!

- regicide