为什么这些AJAX调用要更新我的变量？

Question

我准备好以下变量来保存从API调用返回的字符串：

  // Variables for the Twitch user's object
  var tName = "tName";
  var tLogo = "tLogo";
  var tGame = "tGame";
  var tChannel = "tChannel";

然后我有了这个函数，它包含一个AJAX调用：

    function twitchInfo(user){
$.ajax({
  url: streams + user,
  success: function(response){
    if (response.stream){
      tName = response.stream.channel.display_name;
      tLogo = response.stream.channel.logo;
      tGame = response.stream.game;
      tChannel = response.stream.channel.status;
    } else {
      $.ajax({
        url: users + user,
        success: function(data){
          tName = data.display_name;
          if (data.logo) {
            tLogo = data.logo} else {tLogo = defLogo}
          tGame = "Offline";
          tChannel = " ";
        }
      })
    };        
  }
})
};

这个函数是从一个循环中调用的，循环遍历一个用户数组。

我检查了调用URL，它们都返回数据很好。

我希望ajax调用中的数据能够更新变量，但是在执行console.log(tName + tLogo .)时，没有更新任何内容。

有人能找出原因吗？任何想法都将不胜感激。

谢谢

编辑

  $(document).ready(function() {

  //the Twitch accounts to include:
  var twitchUsers = ["OgamingSC2", "ESL_SC2", "FreeCodeCamp", "storbeck", "brunofin", "comster404", "lastUser"];
  var defLogo = "https://cdn1.iconfinder.com/data/icons/user-experience/512/user-unknown-512.png";

  //Beginning of API call
  var streams = "https://api.twitch.tv/kraken/streams/";
  var users = "https://api.twitch.tv/kraken/users/";

 //Twitch user's object which will hold the info from the API calls.
 var AccInfo=  {};

 // Variables for the Twitch user's object
 var tName = "tName";
 var tLogo = "tLogo";
 var tGame = "tGame";
 var tChannel = "tChannel";

 //Object constructor
 function twitchUser(name, logo, game, channel){
 this.name = name;
 this.logo = logo;
 this.game = game;
 this.channel = channel;
 }

 function twitchInfo(user){
 $.ajax({
 url: streams + user,
  success: function(response){
    if (response.stream){
      tName = response.stream.channel.display_name;
      tLogo = response.stream.channel.logo;
      tGame = response.stream.game;
      tChannel = response.stream.channel.status;
    } else {
      $.ajax({
        url: users + user,
        success: function(data){
          tName = data.display_name;
          if (data.logo) {
            tLogo = data.logo} else {tLogo = defLogo}
          tGame = "Offline";
          tChannel = " ";
        }
      })
    };        
    }
    })
    };

   for (p=0; p<twitchUsers.length; p++){
   twitchInfo(twitchUsers[p]);

$("#theTable").append("<tr><td class=\"theLogo\"><img src=" + AccInfo.logo + "></td><td class=\"user\"><a href=\"http://www.twitch.tv/" + AccInfo.name + "\">"+ AccInfo.name +"</td><td>"+ AccInfo.game + " " + AccInfo.channel + "</td></tr>");

console.log(twitchUsers[p] + " " + tName + " " + tLogo + " " + tGame + " " + tChannel + " ");
  }



 });

Answer 1

这些变量是在哪里声明的？也许它们超出了范围。你能提供一个更完整的样品吗？

还可以尝试将回调传递给twitchInfo函数。因此，与其更新方法中的变量，不如将回调分配给success属性：

function twitchInfo(user, callback){
    $.ajax({
      url: streams + user,
      success: callback
    })
};

当您调用该函数时，只需创建一个内联函数，确保要更新的变量在作用域中：

twitchInfo("some user", function(response) {
    if (response.stream){
          tName = response.stream.channel.display_name;
          tLogo = response.stream.channel.logo;
          tGame = response.stream.game;
          tChannel = response.stream.channel.status;
        } else {
          $.ajax({
            url: users + user,
            success: function(data){
              tName = data.display_name;
              if (data.logo) {
                tLogo = data.logo} else {tLogo = defLogo}
              tGame = "Offline";
              tChannel = " ";
            }
          })
     }
 );