Javascript image.onload 函数返回
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7434371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
image.onload function with return
提问by Poru
I have a JS function where a value is computed and this value should be returned but I get everytime undefinedbut if I console.log()the result within this function it works. Could you help?
我有一个 JS 函数，其中计算了一个值，并且应该返回这个值，但我每次都得到，undefined但是如果我console.log()在这个函数中得到结果，它就可以工作。你能帮忙吗？
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'));
采纳答案by Poru
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'));
回答by Guffa
The value is returned, but not from the detectfunction.
返回值，但不是从detect函数返回。
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 handleLoadfunction to the code that calls the event handler, but the detectfunction has already exited before that. There isn't even any returnstatement in the detectfunction at all, so you can't expect the result to be anything but undefined.
该值从handleLoad函数返回给调用事件处理程序的代码，但detect函数在此之前已经退出。函数中根本没有任何return语句detect，因此您不能期望结果是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 detectfunction with a callback, which will be called once the value is available:
您detect使用回调调用该函数，该函数将在值可用时调用：
detect('image.png', function(result){
alert(result);
});
回答by Nicola Peluchetti
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/
回答by Rob W
detect()doesn't return any value. If you want to get an alert, replace return result;by alert(result).
detect()不返回任何值。如果您想收到警报，请替换return result;为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
回答by Anomie
Your function detectdoesn't return anything, which is why the alertis showing "undefined". The returnstatement 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 thatfunction.
您的函数detect不返回任何内容，这alert就是显示“未定义”的原因。return您声称不起作用的语句是从您分配给的匿名函数返回的image.onload，如果您调用该函数，它可能会正常工作。
