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

我试图测试动态传递给图像标记的URL是否能够解析。我正在使用以下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中解决此类问题？
如何避免它们？
是否有经验法则来识别容易造成这种情况的情况

编辑
谢谢大家的回复。我想我知道现在发生了什么。我将按照第一个回复中的描述实现该函数，但是按照建议为回调添加一个额外的参数

---

再次感谢。

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

<> >而不是返回IMGSTATE（它可能会被一个新函数使用，我将引用它作为代码> DOOMETHONE ），考虑将这个<代码> DOWOMETHOST <代码>函数添加到事件处理程序本身，使其充当回调函数：

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

---

您正在将函数作为事件处理程序添加到image元素。这意味着在退出testImageUri函数后，将保证调用它们。只要您在testImageUri函数中，就不会处理任何事件，因此imgStatus变量永远不会及时更新以返回

解决方案是向testImageUri函数发送回调函数。当事件发生时，调用回调函数。但是，由于函数在设置图像源后立即返回，因此必须在函数外部声明img变量，以便它在退出函数后继续存在

var img;

testImageUri = function(src, callback) {
    img = new Image();

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

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

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

试试这个：

var imageMaker= {
image:null,
imgStatus: false,
goodUri:function() {
            this.imgStatus = true;
        },
badUri:function() {
            this.imgStatus = false;
        }, 
testImageUri:function(src) {
        this.image = new Image();
        this.image.onload = this.goodUri;
        this.image.onerror = this.badUri;
        this.image.src = src;
    }
 }     
};

//now fire imageMaker.testImageUri(src)

---

使用

testimageri

的回调参数获取更多win。img变量在函数中是局部变量，因此退出函数时不再引用对象。它可能在图像加载之前被收集，因此事件永远不会发生……这是可行的，但您必须轮询imgStatus中的更改，并且在发生这种情况时您不会收到信号。此外，您无法区分初始假值和badUri函数设置的假值之间的差异。imgStatus:null应允许您区分差异。检查时使用typeof运算符。当多个imageMaker.testImageUri（src）imageMaker.testImageUri（src1）等按顺序激发时，仅进行查询以避免干扰，是否最好将imageMaker设置为一个函数，返回当前为我以上答案中imageMaker值的对象？然后是imageMaker（）.testImageUri（src）。请告知。