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

Wait for loop to finish $.getJSON for each array item before outputting data

本文关键字：数组 getJSON 数据 输出 循环 等待      更新时间：2023-09-26

我有一个需要从中检索数据的名称数组，我目前正在循环中使用$.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>

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

这意味着您无法从回调外部访问online。

如果你想"等待">所有请求完成，那么我建议使用承诺。 您可以使用$.when将所有请求合并到一个承诺中，然后在所有操作完成后运行回调。

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);
});
相关文章：