范围和订单AJAX回调

时间:2017-05-02 18:00:14

标签: javascript jquery ajax asynchronous callback

此代码需要1)检查用户是否在线2)从稍微不同的URL获取信息,3)输出到HTML。它有效,但不一致。在某些情况下,当运行输出HTML的函数时,它表示第一个请求(在线或非在线)的数据未定义。现在streamData和userData是全局变量。但是我希望没有它我可以让它工作。在同一时间同时在同一个地方提供两个数据源时遇到问题。

  var getOnline = function(){
    for (var i = 0; i < twitchFaves.length; i++) {
      userName = twitchFaves[i];
      streamAjaxOnline(userName);
    }
  }
  var streamAjaxOnline = function(userName){
    $.ajax({
      type        : 'GET',
      url         :  "https://wind-bow.gomix.me/twitch-api/streams/" + userName,
      dataType    : 'jsonp',
      success     : function(twitchData) {

        streamData = twitchData;
        if (streamData.stream){
          userAjaxOnline(userName);
        }
      }
    });
  }
  var userAjaxOnline = function(userName){
    $.ajax({
      type        : 'GET',
      url         :  "https://wind-bow.gomix.me/twitch-api/users/" + userName,
      dataType    : 'jsonp',
      success     : function(twitchData) {
        userData = twitchData;
        displayTwitchOnline(streamData, userData);
      }
    });
  }

1 个答案:

答案 0 :(得分:1)

  

现在streamData和userData是全局

这真的很糟糕。这意味着对函数的多次调用将共享相同的变量并覆盖彼此的结果。

  

但是我希望没有它我可以让它工作。

这相对容易:将数据传递给函数。一个非常简单的解决方案是:

var streamAjaxOnline = function(userName) {
  $.ajax({
    type: 'GET',
    url: "https://wind-bow.gomix.me/twitch-api/streams/" + userName,
    dataType: 'jsonp',
    success: function(twitchData) {
      if (streamData.stream) {
        userAjaxOnline(userName, streamData); // pass streamData here
      }
    }
  });
}
var userAjaxOnline = function(userName, streamData) { // accept streamData here
  $.ajax({
    type: 'GET',
    url: "https://wind-bow.gomix.me/twitch-api/users/" + userName,
    dataType: 'jsonp',
    success: function(twitchData) {
      // no need to store userData if you only use it here
      displayTwitchOnline(streamData, twitchData);
    }
  });
}