Javascript 函数在其子例程完成之前返回

Question

我正在尝试测试动态传递给图像标签的网址是否可以解析。我正在使用以下 JavaScript 函数:

    testImageUri = function(src) {
        var img = new Image();
        var imgStatus = false;

        var goodUri = function() {
            imgStatus = true;
        };

        var badUri = function() {
            imgStatus = false;
        };

        img.onload = goodUri;
        img.onerror = badUri;
        img.src = src;

        return imgStatus;
    }

函数 badUri 和 goodUri 按预期被调用，但它们似乎“迟到”了，因为 testImageUri 函数似乎在更改 imgStatus 变量之前返回。

如何在 JavaScript 中解决此类问题？
如何避免它们？
是否有经验法则来识别容易造成这种情况的情况？

编辑
谢谢大家的回复。我想我明白现在发生了什么。我将按照第一个回复中所述实现该功能，但按照建议为回调添加一个附加参数。

再次感谢。

Answer 1

通过设置 img.onload 和 img.onerror，您可以将函数附加到这些事件处理程序。该脚本将附加它们，并在成功时执行脚本的其余部分。正如您已经注意到的，在这些事件实际触发之前，Javascript 不会停止执行。

考虑将此 doSomething 函数添加到事件处理程序本身，使其充当回调函数:

testImageUri = function(src) {
    var img = new Image();
    var imgStatus = false;

    var goodUri = function() {
        callback_testSuccesful(src);
    };

    var badUri = function() {
        callback_testFailed(src);
    };

    img.onload = goodUri;
    img.onerror = badUri;
    img.src = src;

    return true; // The event handlers have been added; the return value doesn't say if they fired or not.
}

function callback_testSuccesful(src) { } // Function called when the image loaded
function callback_testFailed(src) { } // Function called when loading failed