为什么 Javascript ajax 响应不能存储在全局变量中?



我无法访问存储一些ajax响应数据的全局变量。当我对对象本身进行控制台日志记录时,它会提供所有详细信息,但当我对该对象中的数组进行控制台日志时,它将返回[]。我已经将ajax请求设置为同步。

//let define some global valibables first
var urlun = "#";
var resultObject = {};
resultObject.logo = [];
resultObject.url = [];
resultObject.namee = [];
resultObject.statuss = [];
resultObject.append = appendContent;
var channelArr = ["freecodecamp", "storbeck", "sheevergaming", "habathcx", "RobotCaleb", "ESL_SC2", "ogamingsc2", "noobs2ninjas", "beohoff", "askjoshy", "ggnetworktv"];
//this function is to get all channel's info, those that are not streaming
function getAllnotStreaming(data) {
  var thisItemIsAppend = false;
  for (var i = 0; i < resultObject.namee.length; i++) {
    if (resultObject.namee[i] == data.display_name) {
      thisItemIsAppend = true;
    };
  } // end for
  //real thing
  if (thisItemIsAppend == false) {
    resultObject.logo.push(data.logo);
    resultObject.url.push(data.url);
    resultObject.namee.push(data.display_name);
    resultObject.statuss.push("offline");
  }
}
//get all streaming channle's info
function getAllnowStreaming(data) {
  if (data.stream) {
    resultObject.logo.push(data.stream.channel.logo);
    resultObject.url.push(data.stream.channel.url);
    resultObject.namee.push(data.stream.channel.display_name);
    resultObject.statuss.push(data.stream.channel.status);
  }
}
//to append channel to page, wheather it's streaming or not, all you need a one function
function appendContent(logo, url, name, status) {
  if (logo == null) {
    logo = "https://dummyimage.com/50x50/ecf0e7/5c5457.jpg&text=0x3F";
  };
  var statushtml = '<div class="row channels onlinenow"> <div class="col-md-2"><img class="logoimg" src="' + logo + '"></div> <div class="col-md-4"><div class="name"><a target="_blank" href="' + url + '">' + name + '</a></div></div> <div class="col-md-6"><div class="streaming">' + status + '</div></div></div>';
  $(statushtml).appendTo("#content");
}
//below are control buttons
function showOnlineOnly() {
  $(".offlinenow").show();
  $(".onlinenow").show();
  $(".offlinenow").hide();
}
function showOfflineOnly() {
  $(".offlinenow").show();
  $(".onlinenow").show();
  $(".onlinenow").hide();
}
function showAll() {
  $(".offlinenow").show();
  $(".onlinenow").show();
}
$(document).ready(function() {
  //regestor contol event
  $("#showOnlineOnly").click(showOnlineOnly);
  $("#showOfflineOnly").click(showOfflineOnly);
  $("#showAll").click(showAll);
  // get all now streaming channel first
  for (var i = 0; i < channelArr.length; i++) {
    var url = "https://api.twitch.tv/kraken/streams/" + channelArr[i] + "?callback=?";
    $.ajax({
      dataType: "json",
      async: false,
      url: url,
      success: getAllnowStreaming,
    });
  } //end of for loop
  // let's now get not steaming channels
  for (var i = 0; i < channelArr.length; i++) {
    var url = "https://api.twitch.tv/kraken/channels/" + channelArr[i] + "?callback=?";
    $.ajax({
      dataType: "json",
      async: false,
      url: url,
      success: getAllnotStreaming,
    });
  } //end of another for loop
  //let's append content
  console.log(resultObject);
  console.log(resultObject.logo);
  for (var ii = 0; ii < channelArr.length; ii++) {
    resultObject.append(resultObject.logo[ii], resultObject.url[ii], resultObject.namee[ii], resultObject.statuss[ii]);
  }
});

是否等待ajax调用完成?我想说,在那个时候,物体是空的。您可能应该在getAllnowStreaming和getAllnotStreaming中进行追加。

最新更新