带返回的image.onload函数

Question

我有一个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'));

Answer 1

返回值,但不返回detect函数.

如果对load事件处理程序使用命名函数而不是匿名函数,则更清楚地发生了什么:

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

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

该值从handleLoad函数返回到调用事件处理程序的代码,但该detect函数在此之前已经退出.函数中根本没有任何return声明detect,所以你不能指望结果是什么undefined.

处理这种异步方案的一种常用方法是使用回调函数:

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

您detect可以使用回调调用该函数,该函数将在值可用时调用:

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

Answer 2

这是因为函数检测不返回任何东西，因为加载事件发生在函数完成之后。而且您忘记将图像附加到某些内容中，因此它永远不会加载。

你可以这样做：

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');

在这里小提琴http://jsfiddle.net/LVRuQ/

Answer 3

我自己得到：

我不知道我可以在加载时为其分配一个变量（对我来说已经分配了）。

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'));