javascript - 使用嵌套回调的值作为父函数的返回

Question

所以，我有这个：

function isOnline(sURL) {

    var bOnline,
        oImage = document.body.appendChild( document.createElement("img") );

    oImage.onload = function() {

        bOnline = true;

    };

    oImage.onerror = function() {

        bOnline = false;

    };

    oImage.src = sURL;

    return bOnline;

}

...而且我之前遇到过这个问题，但我在这里有点迷路。如何在正确的时间获得bOnline传递给的值isOnline？正如预期的那样，它undefined（最初）返回。任何帮助，将不胜感激。

Answer 1

始终建议在以下情况下使用回调函数

var online = false;

isOnline("htp://....", function(){
   online = true;
}, function(){
   online = false;
});

function isOnline(sURL, onLoad, onError) {

    var oImage = document.body.appendChild( document.createElement("img") );

    oImage.onload = onLoad;

    oImage.onerror = onError;

    oImage.src = sURL;

}

Answer 2

我强烈建议您使用回调来继续您的逻辑：

 function isOnline(sURL, callbacks){
     var bOnline,
         oImage = document.body.appendChild( document.createElement("img") );
     oImage.onerror = callbacks.error;
     oImage.onload = callbacks.success;
     oImage.src = sURL;
 }

而不是这样的电话：

if(isOnline('some-src')) {
    // good stuff
} else {
   // bad stuff
}

您应该使用以下功能：

isOnline('some-src',{
    success : function(){
        // yey! image is online
    },
    error : function(){
       // eerror loading image. boo :((
    }
});

如果您仍想在不使用回调的情况下在某个时间点进行测试，则可以返回实际的图像对象并在其上固定一个ready或error标志：

function isOnline(sURL) {
    var bOnline,
        oImage = document.body.appendChild( document.createElement("img") );
    oImage.ready = oImage.error = false;
    oImage.onload = function(){
        oImage.ready = true;
    }
    oImage.error= function(){
        oImage.error = true;
    }
    oImage.src = sURL;
    return oImage;
}


var img = isOnline('some-src');
// .. after some computing
if(img.ready) {
    // yey image  has loaded
} else if(img.error) {
   // damn error :(
} else {
   // still not loaded :-?
}