javascript - 将值从 image.onload 传递到周围的函数

Question

我想知道图像路径是否存在，因此我使用 onload 和 onerror 通过 Javascript 加载图像:

Handlebars.registerHelper('image', function(submission_id, point_id) {
    var picture = new Image();

    picture.onload = function() {
        alert('test');
        result = '<img src="' + picture.src + '" />';
    };
    picture.onerror = function() {
        result = '0';
    };
    picture.src = 'static/uploads/submissions/' + submission_id + '/' + point_id + '.png';
    return result;
});

Onload 和 onerror 正在工作，因为如果路径正确，我会收到警报“test”。但问题是，结果的返回不起作用。我知道，它不起作用，因为 onload 是异步调用的，并在返回结果后触发。但我该如何解决这个问题呢？

Answer 1

由于代码是异步的，因此 return 语句不起作用。相反，您需要做的是定义一个函数(称为回调)，该函数在加载图像时调用。那么您的代码将如下所示。

var picture = new Image();
picture.src = "something";
picture.onload = function() {
    callback(picture);
} 

然后回调将如下所示。

var callback = function(picture) {
    doSomething(picture);
}

您可以阅读有关回调的更多信息 here .