Question

看看这个Codepen： http://codepen.io/anon/pen/mPeqBQ

var streamers = ["WagamamaTV", "losty123", "BlackDotATV", "Dendi", "VITALIC_DOTA2", "Singsing", "zonixxcs", "Attackerdota", "purgegamers", "Mikerina","ESL_LOL","jcarverpoker", "gnumme"];

代码查询如下所示：

$.each(streamers, function(key, value) {
    $.getJSON('https://api.twitch.tv/kraken/streams/' + value, function(channel) {
      if (channel["stream"] == null) {
        // ADD TABLE ROW WITH DATA (for details see codepen
      } else {
        // ADD TABLE ROW WITH DATA (for details see codepen)
      }
    });
});

添加表行的顺序或多或少是随机的。我可以以某种方式影响这个顺序，以便它保留数组中给出的原始顺序＆＃34;飘带＆＃34;？只需转到codepen并刷新几次，你就会明白我的意思。

由于

Answer 1

这是因为您的AJAX调用都在同时运行！它们可能无法以相同的顺序完成。一个可能会更快或更慢，所以顺序不一样。

要解决此问题，您可以使用promises。基本上，等到所有请求完成后，再以相同的顺序显示结果。

P.S。您可以使用channel.stream代替channel["stream"]。

// Array shortened for example
var streamers = ["WagamamaTV", "losty123", "BlackDotATV", "Dendi"],
    promises = [];

$.each(streamers, function(key, value){
    // Push the promise into the array
    // We'll take care of the callback and building the table later
    promises.push($.getJSON('https://api.twitch.tv/kraken/streams/' + value));
});

// Now wait until *all* of the requests are done
$.when.apply($, promises).then(function(){
    // This function is passed one argument for each AJAX call,
    // they are passed in order.  So, we can loop over `arguments`
    // to get them in order
    $.each(arguments, function(key, val){
        // Each parameter is actually an array, it's what is normally returned
        // from an AJAX call: `[ data, statusText, jqXHR ]`
        var channel = val[0],
            value = streamers[key];

        if (channel.stream == null) {
            // ADD TABLE ROW WITH DATA (for details see codepen)
        } else {
            // ADD TABLE ROW WITH DATA (for details see codepen)
        }
    });
});

更新了codepen：http://codepen.io/anon/pen/GZpyXZ

$.when的文档（参见＆＃34;示例＆＃34;）：http://api.jquery.com/jQuery.when/

Answer 2

另一种方法是以预期的顺序预先构建表格，每行隐藏，并且一旦响应到达就完成工作。

通过这种方式，您可以将getJSON的成功部分减少到仅渲染完整行所需的最少工作量。

$(function () {
  var streamers = ["WagamamaTV",
                   "losty123",
                   "BlackDotATV",
                   "Dendi",
                   "VITALIC_DOTA2",
                   "Singsing",
                   "zonixxcs",
                   "Attackerdota",
                   "purgegamers",
                   "Mikerina",
                   "ESL_LOL",
                   "jcarverpoker",
                   "gnumme"];

  // build before the full table....
  var cachedEle = $(".streamertable");
  $.each(streamers, function(key, value) {
    cachedEle.append("<tr style='display: none;'><td class='td-stream'>" + value + "</td><td class='td-stream' id='onoff" + value + "'>OFFLINE</td><td class='td-stream' id='viewers" + value + "'>-</td><td class='td-stream' id='game" + value + "'>-</td><td class='td-stream'><a href='http://twitch.tv/" + value + "'>KLICK</a></td></tr>");
  });

  // for each getJSON do only table updating
  $.each(streamers, function(key, value) {
    $.getJSON('https://api.twitch.tv/kraken/streams/' + value, function(channel) {
      if (channel["stream"] == null) {
        $('#onoff' + value).text('OFFLINE').css("color", "red");
      } else {
        $('#viewers' + value).text(channel.stream.viewers);
        $('#game' + value).text(channel.stream.game);
        $('#onoff' + value).text('ONLINE').css("color", "blue");
      }
      $("#onoff" + value).parent('tr').show();
    });
  });
  $(".islive").html("Streams checked!");
});

.streamertable {
  margin: 10px;
  min-width: 700px;
}

.td-stream {
  padding: 5px
}

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div class="container">
    <span class="islive">Checking Stream Status...</span>
</div>


<table class="streamertable" border="0">
    <tr>
        <td class="td-stream" style="font-weight: bold">Name</td>
        <td class="td-stream" style="font-weight: bold">Online</td>
        <td class="td-stream" style="font-weight: bold">Viewers</td>
        <td class="td-stream" style="font-weight: bold">Game</td>
        <td class="td-stream" style="font-weight: bold">Link</td>
    </tr>
</table>

jQuery JSON查询 - 顺序是随机的

2 个答案: