多次调用 .getJSON

Question

var name, logo, streaming,twitchfeed;
var users = ["freecodecamp", "medrybw", "geoffstorbeck",
"terakilobyte", "habathcx", "robotCaleb",
"thomasballinger", "noobs2ninjas", "beohoff","boonyzarc"
];

function getInfo(){

 users.forEach(function(user) {
  var channelURL = 'https://api.twitch.tv/kraken/channels/' + user + '?callback=?';
  var streamURL = 'https://api.twitch.tv/kraken/streams/' + user + '?callback=?';

$.getJSON(channelURL, function(channel) {
$.getJSON(streamURL, function(stream) {
  if (stream.stream === null) {
    streaming = '<span class="label label-danger pull-right label-rawle offline"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></span>';
  } else {
    streaming = '<span class="label label-success pull-right label-rawle online"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></span>';
  }
  twitchfeed = channel.url;
  console.log(twitchfeed);
  name = channel.display_name;

  if (channel.logo === null) {
    channel.logo = 'https://c1.staticflickr.com/1/186/382004453_f4b2772254.jpg';
  }
  logo = '<img src="' + channel.logo + '" class="logo">';

  $('#person').append('<div class="user" id="' + name + '">');
  $('#' + name).append(logo + '<a href="'+twitchfeed+'" TARGET="_blank">' + '<span class="name">' + name + '</span>' + '</a>' + '</div>' + streaming);
  $('#' + name).append('<div class="topic">' + stream.stream.channel.status + '</div>');
});


 // what happens when tabs are clicked
$(function() {

  // 'all' tab
  $('#all').click(function() {

    $('#all').addClass('active');
    $('#online').removeClass('active');
    $('#offline').removeClass('active');

    $(".user").show();
  });
});

// 'online' tab
$('#online').click(function() {

  $('#all').removeClass('active');
  $('#online').addClass('active');
  $('#offline').removeClass('active');

  $(".user").each(function() {
    if ($(this).children(".offline").length < 1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

// 'offline' tab
$('#offline').click(function() {
  $('#all').removeClass('active');
  $('#online').removeClass('active');
  $('#offline').addClass('active');

  $(".user").each(function() {
    if ($(this).children(".offline").length < 1) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });
 });
});
});


}

//Trying to add a user
/*$('#submit-rawle-button').click(function(){
var $newUser = $('#newUser').val();
if(users.indexOf($newUser)==-1)
  {
    users.push($newUser);
  }
getInfo();
});*/

getInfo();

我是使用 JSON 和 jquery $.getJSON 函数的新手。如果我将所有代码从 getInfo 函数中提取出来并在没有问题时调用它。但也许这是我缺乏理解，但我想如果我把所有这些都放在一个函数中。然后稍后我可以在将新用户添加到用户数组后添加一个按钮。我可以再次调用 getInfo 函数，它会给我一个新的 JSON 对象，该对象使用添加的新用户进行更新。但是，相反，我只是取回空对象。有人会向我解释为什么不能多次调用 getInfo，或者我的编码错误是什么导致无法更新 JSON 对象。

Answer 1

users.forEach 不等待 ajax 调用完成。我认为术语是 AJAX 是异步的，而 forEach 是同步的。

每次使用 ajax 时请记住这一点。我稍微更改了代码，以便在第二个 getJSON 完成之前它不会尝试转到下一个用户。 必须有一种更优雅的方式来做到这一点。我还建议您关注promises，它将在未来派上用场。希望这会有所帮助。

var name, logo, streaming, twitchfeed;
var users = ["freecodecamp", "medrybw", "geoffstorbeck",
    "terakilobyte", "habathcx", "robotCaleb",
    "thomasballinger", "noobs2ninjas", "beohoff", "boonyzarc"
];

function getInfo() {

    var usersTotal = users.length;
    var userCounter = 0;


    function getNextUser() {

        if (usersTotal > userCounter) {

            var user = users[userCounter];
            var channelURL = 'https://api.twitch.tv/kraken/channels/' + user + '?callback=?';
            var streamURL = 'https://api.twitch.tv/kraken/streams/' + user + '?callback=?';

            $.getJSON(channelURL, function (channel) {
                $.getJSON(streamURL, function (stream) {
                    if (stream.stream === null) {
                        streaming = '<span class="label label-danger pull-right label-rawle offline"><span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></span>';
                    } else {
                        streaming = '<span class="label label-success pull-right label-rawle online"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></span>';
                    }
                    twitchfeed = channel.url;
                    console.log(twitchfeed);
                    name = channel.display_name;

                    if (channel.logo === null) {
                        channel.logo = 'https://c1.staticflickr.com/1/186/382004453_f4b2772254.jpg';
                    }
                    logo = '<img src="' + channel.logo + '" class="logo">';

                    $('#person').append('<div class="user" id="' + name + '">');
                    $('#' + name).append(logo + '<a href="' + twitchfeed + '" TARGET="_blank">' + '<span class="name">' + name + '</span>' + '</a>' + '</div>' + streaming);
                    $('#' + name).append('<div class="topic">' + stream.stream.channel.status + '</div>');


                });

                // what happens when tabs are clicked
                $(function () {

                    // 'all' tab
                    $('#all').click(function () {

                        $('#all').addClass('active');
                        $('#online').removeClass('active');
                        $('#offline').removeClass('active');

                        $(".user").show();
                    });
                });

// 'online' tab
                $('#online').click(function () {

                    $('#all').removeClass('active');
                    $('#online').addClass('active');
                    $('#offline').removeClass('active');

                    $(".user").each(function () {
                        if ($(this).children(".offline").length < 1) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    });
                });

// 'offline' tab
                $('#offline').click(function () {
                    $('#all').removeClass('active');
                    $('#online').removeClass('active');
                    $('#offline').addClass('active');

                    $(".user").each(function () {
                        if ($(this).children(".offline").length < 1) {
                            $(this).hide();
                        } else {
                            $(this).show();
                        }
                    });
                });
            });

        }

        userCounter++;
        getNextUser();

    }

    getNextUser();
}

//Trying to add a user
/*$('#submit-rawle-button').click(function(){
 var $newUser = $('#newUser').val();
 if(users.indexOf($newUser)==-1)
 {
 users.push($newUser);
 }
 getInfo();
 });*/

getInfo();