why is return value of javascript function undefined?

Question

I've got a function to detect the size of an image, and I want it to return an object that contains both the width and height. In the code below, sz.width and sz.height within the function hold the values, but after they return the value it's undefined. What am I missing?

     function getImgSize(imgSrc) {
        var newImg = new Image();

        newImg.onload = function() {
          var height = newImg.height;
          var width = newImg.width;

          function s() {}
          sz = new s();
          sz.width = width;
          sz.height = height;
          $('#infunc').text("in function, w = "+sz.width+", h = "+sz.height);
          return sz;
        }
        newImg.src = imgSrc; // this must be done AFTER setting onload
      }

var sz = getImgSize("http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg");
$('#outfunc').text("outside function, w = "+sz.width+", h = "+sz.height);

jsfiddle: http://jsfiddle.net/forgetcolor/LbxA3/

You are not the first to try to use async code in sequential context. Not the last either :) — Ilia G
– Ilia G, Commented May 22, 2012 at 1:49
Besides that you don't return anything, won't the image load function run after the image has been loaded, whereas getImgSize would return before then? (I'm not sure how the image loading stuff works.) — Dave Newton
– Dave Newton, Commented May 22, 2012 at 1:50
This question is similar to: How do I return the response from an asynchronous call?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Oct 16 at 13:35

Michael Lorton · Accepted Answer · 2012-05-22 01:51:09Z

The function getImgSize sets up the image loading and then terminates. Later, when the image loads, the anonymous onload function is invoked and correctly calculates the size, then returns it, to an uncaring DOM engine...

You're probably wondering how you can do what you want. Short answer: you can't. Here's the closest you can get:

  function getImgSize(imgSrc, callback) {
    var newImg = new Image();

    newImg.onload = function() {
      ... // blah-blah blah
      callback(sz);
    }
    newImg.src = imgSrc;
  }
  getImgSize("http://lorempixel.com/output/fashion-q-c-1920-1920-4.jpg",
            function(sz) {
              $('#outfunc').text("in callback, w = "+sz.width+
                                 ", h = "+sz.height);
            });

I actually came here to write:

// this must be done AFTER setting onload

That's what I bet your problem was. // this must be done AFTER setting onload

qwertymk · Accepted Answer · 2012-05-22 01:51:01Z

2

It can't be done. You're trying to get a return value of an async call.

Consider:

var i = 0;
setTimeout(function() { i = 1; }, 1000); //1 second later
alert(i);

That will alert 0 because the value only gets changed in one second and not right away.

don't believe me?

What you're trying to do is the same thing. you can't use a value that didn't happen yet. In order to accomplish what you're trying to, you need to use callbacks.

answered May 22, 2012 at 1:51

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

Collectives™ on Stack Overflow

why is return value of javascript function undefined?

2 Answers 2

Comments

don't believe me?

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related