0

我有四个函数可以处理我的应用程序的某个部分以获取照片 url。

在函数 handleGetPhotoResponse 中，警报中有我的网址，一切看起来都应该如此。

问题出在函数 handleGetUsersFurKidsResponse 中。变量“fkimg”未定义。谁能告诉我哪里出错了？

为了使用应用程序的这一部分，我调用了“getUsersFurKids”。

function handleGetPhotoResponse(responseText, size) {
    var photoDetails = JSON.parse(responseText);
    var thePhoto = photoDetails[size];
    alert(thePhoto);
    return thePhoto;
}

function getPhoto(id, size) {
    var url = "url-removed"+id;
    var request = new XMLHttpRequest();
    //Send the proper header information along with the request
    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            return handleGetPhotoResponse(request.responseText, size);
        }
    };
    request.send(null);
}

// function to handle the response of getting a users fur kids
function handleGetUsersFurKidsResponse(responseText) {
    var ul = document.getElementById("furKidList");
    var furKids = JSON.parse(responseText);
    for(var i = 0; i<furKids.length; i++){
        var li = document.createElement("li");
        var fkimg = getPhoto(furKids[i].ui_id, 'small');
        li.innerHTML = "<a href=\"\"><img src=\""+fkimg+"\"> "+furKids[i].p_name;
        ul.appendChild(li);
    }
}

// function to get a users fur kids
function getUsersFurKids(id) {
    // api url for getting fur kids
    var url = "url-removed"+id;
    var request = new XMLHttpRequest();
    //Send the proper header information along with the request
    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            handleGetUsersFurKidsResponse(request.responseText);
        }
    };
    request.send(null);
}
4

2 回答 2

3 
         // receive a callback---v
function getPhoto(furKid, size, callback) {
         //         ^---and the current furKid

        // use the ui_id------------v
    var url = "url-removed" + furKid.ui_id;
    var request = new XMLHttpRequest();

    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {

         // Invoke the callback, and pass it the result of handleGetPhotoResponse
            callback(handleGetPhotoResponse(request.responseText, size), furKid.p_name);
                     // use the p_name-----------------------------------------^
        }
    };
    request.send(null);
}

function handleGetUsersFurKidsResponse(responseText) {
    var ul = document.getElementById("furKidList");
    var furKids = JSON.parse(responseText);
    for(var i = 0; i<furKids.length; i++){

            // pass a callback-----------------v
        getPhoto(furKids[i], 'small', function(fkimg, p_name) {
            var li = document.createElement("li");
            li.innerHTML = "<a href=\"\"><img src=\""+fkimg+"\"> "+ p_name;
            ul.appendChild(li);
        });
    }
}
于 2012-11-06T23:58:29.910 回答
3

您似乎不明白 getPhotos 是一个异步函数。它内部的 onload 处理程序会在 getPhoto 函数本身返回并完成后很长时间后调用。因此，您不能从 getPhoto 返回在 onload 中检索到的值。

相反，您必须将需要使用来自 getPhoto 的 onload 响应的所有代码放入 onload 处理程序本身（或从 onload 处理程序内部调用），因为只有在调用 onload 处理程序时才知道该数据。

这就是异步编程在 javsacript 中的工作方式。

向 getPhoto 添加一个回调并从 onload 处理程序内部调用该回调，将您从异步调用中获得的 img 传递给它。然后，只有这样，您才能使用该 img 数据。

于 2012-11-06T23:59:29.337 回答