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'));
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);
});
async/await instead of callback function? I've tried it in my code but got an error saying Uncaught (in promise) Error: TypeError: callback is not a function. The error is thrown because when I call my function I don't specify a callback but just have const x = detect(URL) (I'm using `detect function just to illustrate)
result of callback from detect function?detect function finishes before the callback is called. You can return a promise from the detect function, but that is basically just a wrapper around a callback.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/
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
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'));
image.onload. So image.onload will be an array, whilst it should be a function. Then you also set that array to x and return it. You do get the array back from detect(...), but the whole idea of onload is lost.
image.onload there. image.onload value is a function so it will automatically be executed when dom image is loading the image from its source.Your function detect doesn't return anything, which is why the alert is showing "undefined". The return statement that you claim doesn't work is returning from the anonymous function you assign to image.onload, and probably works fine if you would call that function.
onload probably ignores the return value anyway. If he would somehow call that function manually, the return would work.
.onloadhandler before you set.srcbecauseonloadcan trigger immediately when you set.srcif the image is in the browser cache. If you set.onloadafterwards, it may miss the load event and never fire.