javascript variable doesnt work as expected

Question

i'm trying to get the width of an image but it it always undefine. here is the part of the code

var w;

var _URL = window.URL || window.webkitURL;
var img = new Image();
img.src = _URL.createObjectURL(files[i]);
img.onload = function  () {
    w = this.width;
    console.log(w); // works
};

console.log(w); // undefined

and i notice the the last console log are being called first, and not the console inside a function(), is it the correct behavior? because i thought that it will call a function line by line.

if i input 4 files, the result will be 4 undefined first, then the actual width of the image.

onload is called asynchronously, when the image loads ... w will be undefined until that occurs, your code outside the onload function doesn't wait for the image to load — Jaromanda X, Jan 14 '17 at 05:48
@JaromandaX so how can i get the value of this.width and use it outside the onload — markoverflow, Jan 14 '17 at 05:49
simple answer, you can't, complex answer, learn how to use asynchronous code using either callbacks or promises — Jaromanda X, Jan 14 '17 at 05:50
@markoverflow you need to use a callback. You can call functions inside the onload to use your width variable or just put stuff in the `onload`. You could alternatively just predict the image width based on how it is styled or what not (not sure what the use case is). — vkoves, Jan 14 '17 at 05:51
@markoverflow, technically w will _become_ defined.. you just have to wait until the image has finished loading — haxxxton, Jan 14 '17 at 05:51
maybe http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call will help — Jaromanda X, Jan 14 '17 at 05:51
Possible duplicate of [Why are these variables "undefined"?](http://stackoverflow.com/questions/17830523/why-are-these-variables-undefined) — Sebastian Simon, Jan 14 '17 at 05:51

score 2 · Answer 1 · answered Jan 14 '17 at 05:51

JavaScript execute line by line. img.onload function also invoked when the image loaded that means it's asynchronous. but in the mean time console.log(w); executes as it's synchronous and not dependent on img.onload function.If you declare w variable at first then it would not print undefined.

score 0 · Answer 2 · answered Jan 14 '17 at 05:51

0

Javascript is asynchronous and you cannot call console.log(w) outside the onload

onload func will execute asynchronously

http://www.sohamkamani.com/blog/2016/03/14/wrapping-your-head-around-async-programming/

answered Jan 14 '17 at 05:51

M14

1,780
2
14
31

score 0 · Answer 3 · answered Jan 14 '17 at 05:56

var w;//Global variable (avoid this)
    
    var _URL = window.URL || window.webkitURL;
    var img = new Image();
    img.src = 'https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e';
    img.onload = function  () {
        w = this.width;
        console.log('inside function:'+w); // works
    };
    document.getElementById('content').appendChild(img)
    console.log('outside function:'+w); // Because this happens before the onload function get called

<html>
  <body>
    <div id="content"></div>
    </body>
  </html>

score 0 · Answer 4 · answered Jan 14 '17 at 06:06

img.onload = fun... just register the function to the load event and pass for the next instruction. The function is called when the load event is emitted, that's after the later console.log(w) been executed with undefined value of w. You should read about Syncronous and Asynchronous calls.

javascript variable doesnt work as expected

4 Answers4