Javascript函數返回undefined

我有四個函數來處理我的應用程序的某個部分獲取照片url。Javascript函數返回undefined

在函數handleGetPhotoResponse中，alert中有我的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); 
}

來源

2012-11-06 Clint C.

那麼確定。 'getPhoto（）'不返回任何東西。 –

我以爲「return handleGetPhotoResponse（request.responseText，size）;」會返回價值？ –

@ClintChaney：它返回函數'request.onload（）'內的值，而不是'getPhoto（）'。此外，被調用的函數和響應GET請求的服務器之間存在延遲。 – JCOC611

  // 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-06 23:58:29

您傳遞給g'etPhoto（）的回調函數存在問題，因爲當回調試圖使用它時，'i'的值不會成爲你想要的值，因爲'for'循環會運行完成。這是使用回調的正確概念，但由於for循環索引，實現有缺陷。 – jfriend00

@ jfriend00：是的，我已經更新，但謝謝。 :) –

...我只注意到我錯過了循環中的'li'變量。固定。 –

你似乎並不明白，getPhotos是一個異步函數。其中的onload處理程序在getPhoto函數本身返回並完成之後很久纔會調用。因此，您無法從onload中檢索到的getPhoto中返回值。因爲只有當onload處理程序被調用時，您必須將所有需要使用onPhoto的onload響應的代碼放入onload處理程序本身內部（因爲該數據已知）。

這是異步編程如何在javsacript中工作。

向getPhoto添加一個回調，並從onload處理程序中調用該回調函數，並將它從異步調用中獲得的img傳遞給它。然後，只有那樣，你可以使用該img數據。

來源

2012-11-06 23:59:29 jfriend00

謝謝，還在學習JavaScript這部分肯定讓我感到困惑。可能會採取一些練習來使用和學習！ –

Javascript函數返回undefined

回答

相關問題