Image.onload function with return

Question

I have a JS function where the value is calculated, and this value should be returned, but I get undefined every time, but if I console.log() result in this function, it works. Could you help me?

 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

I myself get:

I did not know that I could assign a variable to this (already assigned to me) 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 2

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

If you use a named function for a load event handler instead of an anonymous function, it more clearly shows what happens:

 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 before that, the detect function has already exited. In detect is not even a return , so you cannot expect the result to be anything other than undefined .

One common way to handle asynchronous scripts like this is to use the 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 that is called after the value is available:

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

Answer 3

This is due to the fact that detecting a function does not return anything, since the load event occurs after the function finishes. And you forgot to add the image to something so that it never loads.

You can 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 4

detect() does not return any value. If you want to receive an alert, replace return result; on alert(result) .

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 

Answer 5

Your detect function returns nothing, so alert displays "undefined". The return , which you claim does not work, is returned from the anonymous function assigned to image.onload , and probably works fine if you call this function.