javascript - 如何对加载的 XML 数据进行排序

Question

在我的应用程序中，我有一个 XML 文件，用于连接到不同的 API 并收集信息。然后在 div 中，显示获取的信息。我成功地做到了，但问题是，XML 不会逐一加载 if 元素。它并行加载数据，因此它创建的 div 的顺序与 xml 文件中的顺序不同。

这是一个 demo 从本地、SoundCloud、Spotify 和 iTunes 获取一些数据。

这是 XML file它正在加载:

$.ajax({
  url: "https://dl.dropboxusercontent.com/u/33538012/text.xml",
  dataType: "xml",
  success: parse,
  error: function() {
    alert("Error");
  }
});

function parse(document) {
  var inc = 1;

  $(document).find("track").each(function() {
    var rowNum = inc;
    var trackType = $(this).find('type').text();
    var trackTitle = $(this).find('title').text();
    var soundcloud_url = $(this).find('soundcloud_url').text();
    var spotify_track_uri = $(this).find('spotify_track_uri').text();
    var itunes_id = $(this).find('itunes_id').text();
    
    if (trackType == "audio") {
      inc = inc + 1;
      $(".playlist").append("<div id='" + rowNum + "' >" + rowNum + " " + trackTitle + "</div>");
      
    } else if (trackType == "soundcloud") {
      inc = inc + 1;
      SC.initialize({
        client_id: "b8f06bbb8e4e9e201f9e6e46001c3acb"
      });
      SC.resolve(soundcloud_url).then(function(sound) {
        trackTitle = sound.title;
        $(".playlist").append("<div id='" + rowNum + "' >" + rowNum + " " + trackTitle + "</div>");
      });
      
    } else if (trackType == "spotify") {
      inc = inc + 1;
      var spotifyLink = "https://api.spotify.com/v1/tracks/" + spotify_track_uri;
      $.getJSON(spotifyLink, function(data) {
        trackTitle = data.name;
        $(".playlist").append("<div id='" + rowNum + "' >" + rowNum + " " + trackTitle + "</div>");
      });
      
    } else if (trackType == "itunes") {
      inc = inc + 1;
      var iTuensLink = "https://itunes.apple.com/lookup?id=" + itunes_id + "&callback=?";
      $.getJSON(iTuensLink, function(data) {
        trackTitle = data.results[0].trackName;
        $(".playlist").append("<div id='" + rowNum + "' >" + rowNum + " " + trackTitle + "</div>");
      })
    }
    
  });

}

<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playlist"></div>

如果您查看代码的结果，每行旁边的数字显示原始 XML 文件中的顺序，但它们并未完全依次加载。

有什么方法可以对加载的文件进行排序，就像在 XML 文件中写入它们一样？

Answer 1

您可以使用延迟对象，它是 Promise 的扩展，并且可以自行解析它。因此，它们在与解析一起使用时可以充当触发器

创建一个数组来保存我们的延迟对象，请注意顺序很重要，因此使用数字数组只需创建一个延迟

var dfd = jQuery.Deferred();

定义应该做什么

dfd.then(function(){
  $(".playlist").append("<div id='" + rowNum + "' >" + rowNum + " " + trackTitle + "</div>");
  })

最后将其推送到我们的数组上

  x.push(dfd)

所有 api 调用结束后，只需对每个调用 resolve 即可

$.each(x, function(){
    this.resolve(); //then callback gets called one by one on each deffered 
});

https://jsfiddle.net/sanddune/rr7tord6/

您可能希望有某种机制来检测最慢的调用何时完成，然后调用解析

编辑:

各个 api 的延迟在不同地区差异很大，例如对我来说 soundcloud 是最“滞后”的，所以它最后完成，但对于其他人来说 itunes 可能是最后完成的，这是由于许多变量，例如与服务器的距离， ISP、节流等显然你永远不能依赖“最后一个站着”的方法，所以我只能建议使用某种类似这样的计数器来跟踪有多少请求未完成

首先获取总数。涉及 api 的节点(inn xml)表示您只有 soundcloud 和 shopify，所以现在 total = 2 ； 计数 = 0

因此，当 api 请求产生时，将其加一，如

$.getJSON(spotifyLink, function(data) {
    trackTitle = data.name;
    alert('shopify loaded'); 
    count++;check();
});

或

SC.resolve(soundcloud_url).then(function(sound) {
    trackTitle = sound.title;
    alert('soundcloud loaded'); 
    count++;check();
});

请注意，即使 API 请求失败，您也需要增加(这可能是由于参数错误等导致的)

调用一个检查函数，该函数将检查 api 请求的每个成功/失败部分的 count == total

function check(){
  if(count==total)
  alert('all api request finished');
  //resolve all deffereds
}