Javascript回调和返回值 - 异步调用

时间:2016-11-21 21:29:21

标签: javascript callback

我无法在回调之外阅读回调结果。我可以得到一些建议。

/ ***** ORIGINAL帖子:**** /

def * = MyHListCaseClassShape(f1, f2, f3...)

/ *****更新:回答了我的问题:修改了显示异步调用行为的代码****** /

function loadImg() {
    var url = '/img/image01.jpg';
    setImgUrl(url, function (result, i) {
        if (result == true) {
            console.log(result);
        }
        else if (result == false) {
            console.log(result);
        }
    });
    console.log(result);  // result is not defined
    return result;        // I need to return result to be used elsewhere.
}

function setImgUrl(url, callback) {
    var img = new Image();
    img.src = url;
    img.onload = function () {
        $('#img01').attr('src', url);
        callback(true);
    };
    img.onerror = function () {
        callback(false);
    };
}

在阅读了有关异步调用行为的更多信息之后,我想到我想要发生的事情实际上正在发生,但我在错误的时间寻找它。感谢对重复帖子的引用,虽然这不是一个答案,但确实有助于指出发生了什么。在我的console.log输出的代码之后调用了回调,因此值尚未更改。我列出了console.log的输出,以帮助显示异步行为。值得注意的是," loadImg:"在"回调之前发生:"虽然它早在代码中出现,因此它被称为异步代码。

var loadImgResult = false;

$('.panels').click(function () {
    loadImg();
    console.log('panels: ' + loadImgResult);
});

$('#ImgPrev').click(function () {
    console.log('prev: ' + loadImgResult);
});

$('#ImgNext').click(function () {
    console.log('next: ' + loadImgResult);
});

function loadImg() {
    var url = '/img/panel01/image01.jpg';
    setImgUrl(url, function (result, i) {
        if (result == true) {
            loadImgResult = result;
            console.log('callback: ' + loadImgResult);
        }
        else if (result == false) {
            loadImgResult = result;
            console.log('callback: ' + loadImgResult);
        }
    });
    console.log('loadImg: ' + loadImgResult);
}

function setImgUrl(url, callback) {
    var img = new Image();
    img.src = url;
    img.onload = function () {
        $('#img01').attr('src', url);
        callback(true);
    };
    img.onerror = function () {
        callback(false);
    };
}

0 个答案:

没有答案