将值从 image.onload 传递给周围的函数

Question

我想知道图像路径是否存在，所以我用 Javascript 使用 onload 和 onerror:

加载图像

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"。但问题是， result 的返回不起作用。我知道，它不起作用，因为 onload 被异步调用并在返回结果后触发。但是我该如何解决呢？

Answer 1

因为代码是异步的，所以 return 语句将不起作用。相反，您需要做的是定义一个函数（称为回调），该函数在加载图像时调用。然后你的代码看起来像这样。

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

然后回调看起来像这样。

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

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

将值从 image.onload 传递给周围的函数

Passing value from image.onload to the surrounding function

javascript

dom-events

onload

onerror