與異步和同步函數相關的未定義JavaScript函數問題

目前我正在從twitch.tv API中檢索數據的項目。我有兩個功能 - 一個是分類用戶是否處於活動狀態，不活動或已經死亡（已經刪除他們的賬戶），另一個是根據用戶的狀態獲取特定數據。例如，如果在運行classification函數時發現user1處於活動狀態，則使用profile函數我將檢索他/她的個人資料圖片和生物。我將profile函數返回的字符串值存儲在add變量中，但console.log(add)顯示爲未定義。我的代碼如下。任何解釋或解決方案將非常感謝！我是Javascript的新手，所以簡單的解釋會很棒！與異步和同步函數相關的未定義JavaScript函數問題

$(document).ready(function(){ 
var users= ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff", "MedryBW", "comster404", "brunofin"]; 
classification(users); 

function classification(arr){ 
    for(var i=0; i<arr.length; i++) { 
     (function(i) { 
     $.getJSON("https://api.twitch.tv/kraken/streams/"+arr[i]+"?callback=?", function (data){ 
      var code=""; 
      if(data.stream) { 
       var add= profile(arr[i], data.stream); 

       code="<div id='"+arr[i]+"' class='active'><a href='http://www.twitch.tv/"+arr[i]+"'>"+arr[i]+"</a><img class='check-icon' src='css/images/check.png'>"+add+"</div>"; 

       //why is add undefined?? 
       console.log(add); 
       $("#content").append(code); 

      } else if (data.stream===null) { 
       var add= profile(arr[i], data.stream); 
       code="<div id='"+arr[i]+"' class='inactive'><a href='http://www.twitch.tv/"+arr[i]+"'>"+arr[i]+"</a><img class='x-icon' src='css/images/x.png'>"+add+"</div>"; 
       //why is add undefined?? 
       console.log(add); 
       $("#content").append(code); 

      } else if (data.error) { 
       code="<div id='"+arr[i]+"' class='dead'>Unfortunately "+arr[i]+" has deleted their account</div>"; 
       $("#content").append(code); 
      } 

     }); 
    })(i); 

    } 


} 


function profile(val, ifActive) { 
    var code=""; 
    $.getJSON("https://api.twitch.tv/kraken/users/"+val+"?callback=?", function (data){ 
     if(ifActive) { 
      var pic= data.logo; 
      var bio= data.bio; 
      code="<span class='pic'><img src='"+pic+"'></span><div class='bio'>"+bio+"</div>"; 


      return code; 

     } else if(ifActive===null) { 
      var pic= data.logo; 
      code="<span class='pic'><img src='"+pic+"'></span>"; 


      return code; 

     } 
    }); 


}

}）;

來源

2015-12-30 dshidham

回調這是因爲您的配置文件功能不返回任何值。內部的Ajax調用會執行，但您需要做的是將返回的值返回到分類。 –

您無法從異步方法返回。你編碼的方式，它不會工作。基本上所有的'var add = profile（arr [i]，data.stream）'後面的代碼需要在配置文件回調中執行。 – epascarello

@epascarello有趣......我認爲我的配置文件功能是一種同步方法。你怎麼知道它是異步的？我在理解如何區分兩者時遇到了一些麻煩，因此任何解釋或有用的鏈接都將非常感謝！ – dshidham

實現您的個人資料功能

$(document).ready(function(){ 
    var users= ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff", "MedryBW", "comster404", "brunofin"]; 
    classification(users); 

    function classification(arr){ 
     for(var i=0; i<arr.length; i++) { 
      (function(i) { 
       $.getJSON("https://api.twitch.tv/kraken/streams/"+arr[i]+"?callback=?", function (data){ 
        var code=""; 
        if(data.stream) { 
         profile(arr[i], data.stream, function(add){ 
          code="<div id='"+arr[i]+"' class='active'><a href='http://www.twitch.tv/"+arr[i]+"'>"+arr[i]+"</a><img class='check-icon' src='css/images/check.png'>"+add+"</div>"; 

          //why is add undefined?? 
          console.log(add); 
          $("#content").append(code); 
         }); 


        } else if (data.stream===null) { 
         profile(arr[i], data.stream, function(add){ 
          code="<div id='"+arr[i]+"' class='inactive'><a href='http://www.twitch.tv/"+arr[i]+"'>"+arr[i]+"</a><img class='x-icon' src='css/images/x.png'>"+add+"</div>"; 
          //why is add undefined?? 
          console.log(add); 
          $("#content").append(code); 
         }); 

        } else if (data.error) { 
         code="<div id='"+arr[i]+"' class='dead'>Unfortunately "+arr[i]+" has deleted their account</div>"; 
         $("#content").append(code); 
        } 

       }); 
      })(i); 
     } 
    } 

    function profile(val, ifActive, callback) { 
     var code=""; 
     $.getJSON("https://api.twitch.tv/kraken/users/"+val+"?callback=?", function (data){ 
      if(ifActive) { 
       var pic= data.logo; 
       var bio= data.bio; 
       code="<span class='pic'><img src='"+pic+"'></span><div class='bio'>"+bio+"</div>"; 
       if(typeof callback == 'function') { 
        callback(code); 
       } 
      } else if(ifActive===null) { 
       var pic= data.logo; 
       code="<span class='pic'><img src='"+pic+"'></span>"; 
       if(typeof callback == 'function') { 
        callback(code); 
       } 
      } 
     }); 


    } 
});

來源

2015-12-30 04:11:09 dann

非常感謝！這工作！ – dshidham

與異步和同步函數相關的未定義JavaScript函數問題

回答

相關問題