javascript - 在输出数据之前等待循环完成每个数组项的 $.getJSON

Question

我有一个名称数组，我需要从中检索数据，目前我正在循环中使用 $.getJSON 执行此操作。它有效，我可以检索数据，但要输出正确的值，我需要使用 setTimeout 或类似的。我想知道是否有更完善的方法来实现我想要实现的目标。

这是我得到的。

var names = ["riotgames", "example"];
var online = [];

for (var i = 0; i < names.length; i++) {
  $.getJSON('https://api.twitch.tv/kraken/streams/' + names[i], function(data) {
    if (data.stream != null) {
      online.push(data.stream.channel.display_name);
    };
  });
}

console.log(online) // outputs []

setTimeout(function() {
  console.log(online) // outputs correctly
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

在执行 $.getJSON 时，您会触发异步 请求。这意味着它们在后台运行。您不必等待他们完成，他们的回调将在请求完成后触发(如事件)。

这意味着您无法从回调之外访问在线。

如果您想“等待”所有 请求完成，那么我建议使用 promises。您可以使用 $.when 将所有请求组合成一个 promise ，然后在一切完成后运行回调。

var names = ["riotgames", "example"];
var promises = [];

for (var i = 0; i < names.length; i++) {
    // $.getJSON returns a promise
    promises.push($.getJSON('https://api.twitch.tv/kraken/streams/' + names[i]));
}

// Combine all promises
// and run a callback
$.when.apply($, promises).then(function(){
    var online = [];

    // This callback will be passed the result of each AJAX call as a parameter
    for(var i = 0; i < arguments.length; i++){
        // arguments[i][0] is needed because each argument
        // is an array of 3 elements.
        // The data, the status, and the jqXHR object
        online.push(arguments[i][0].stream.channel.display_name);
    }

    console.log(online);
});