0

写真のURLを取得するためにアプリの特定の部分を処理する4つの関数があります。

関数handleGetPhotoResponseには、アラートに私のURLが含まれていますが、すべてが本来あるべきように見えます。

問題は関数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関数自体が戻って終了した後、しばらくしてから呼び出されます。そのため、onloadで取得されたgetPhotoから値を返すことはできません。

代わりに、getPhotoからのonload応答を使用する必要があるすべてのコードをonloadハンドラー自体の内部（またはonloadハンドラーの内部から呼び出される）に配置する必要があります。これは、onloadハンドラーが呼び出されたときにのみそのデータが既知であるためです。

これは、javsacriptで非同期プログラミングがどのように機能するかです。

getPhotoにコールバックを追加し、onloadハンドラー内からそのコールバックを呼び出して、非同期呼び出しから取得したimgを渡します。それから、そしてその時だけ、あなたはそのimgデータを使うことができます。

于 2012-11-06T23:59:29.337 に答える