image.onload function with return

Question

I have a JS function where a value is computed and this value should be returned but I get everytime undefined but if I console.log() the result within this function it works. Could you help?

function detect(URL) {
    var image = new Image();
    image.src = URL;
    image.onload = function() {
        var result = [{ x: 45, y: 56 }]; // An example result
        return result; // Doesn't work
    }
}

alert(detect('image.png'));

Answer 1

The value is returned, but not from the detect function.

If you use a named function for the load event handler instead of an anonymous function, it's clearer what's happening:

function handleLoad() {
  var result = [{ x: 45, y: 56 }];
  return result;
}

function detect(URL) {
  var image = new Image();
  image.src = URL;
  image.onload = handleLoad;
}

The value is returned from the handleLoad function to the code that calls the event handler, but the detect function has already exited before that. There isn't even any return statement in the detect function at all, so you can't expect the result to be anything but undefined.

One common way of handling asynchronous scenarios like this, is to use a callback function:

function detect(URL, callback) {
  var image = new Image();
  image.src = URL;
  image.onload = function() {
    var result = [{ x: 45, y: 56 }];
    callback(result);
  };
}

You call the detect function with a callback, which will be called once the value is available:

detect('image.png', function(result){
  alert(result);
});

Answer 2

This is because the function detect doesn't return anything since the load event happens after the function is finished. And you forgot to append the image to something so it never loads.

You could do something like:

function detect(URL) {
    var image = new Image();
    image.src = URL;
    image.onload = function() {
        var result = 'result'; // An example result
        alert(result); // Doesn't work
    }
    document.body.appendChild(image)
}

detect('http://www.roseindia.net/javascript/appendChild-1.gif');

fiddle here http://jsfiddle.net/LVRuQ/

Answer 3

I get it myself:

I didn't know that I can assign a variable to that (for me looking already assigned) onload.

function detect(URL) {
    var image = new Image();
    image.src = URL;
    var x = image.onload = function() {
        var result = [{ x: 45, y: 56 }]; // An example result
        return result;
    }();
    return x;
}

alert(detect('x'));

Answer 4

detect() doesn't return any value. If you want to get an alert, replace return result; by alert(result).

An analysis of your code:

function detect(URL) {
    ...
    image.onload = function(){ //assigning an event handler (function) to an object
        ...
        return result; //this return statement is called from within another function
    }
}//function "detect" ends here. No return statement has been encountered