进行异步jQuery调用

Question

$(document).ready(function(){

  $.getJSON("https://api.deckbrew.com/mtg/sets", function(sets) {
    $(sets).each(function() {
      $('<div id="' + this.name + '" class="set"/>')
      .text(this.name)
      .appendTo("#collection");

    });
  });

  $.getJSON("https://api.deckbrew.com/mtg/cards", function(cards) {
    $(cards).each(function(){
      $('<div id="' + this.name + '" class="card"/>')
      .text(this.name)
      .appendTo("#" + this.editions[0].set);

    });
  });

});

我想知道如何（不使用ajax并坚持使用“ getJSON”方法）使这两个调用异步发生。 我无法使第二个jQuery对象有用。 我相信这是因为通话的同步性。 如何使它们按顺序工作？

Answer 1

如果您希望这些顺序发生，那么您需要专门对其进行序列化，并使用内置的承诺（即getJSON（）返回）是一种简单的方法：

$(document).ready(function () {
    $.getJSON("https://api.deckbrew.com/mtg/sets").then(function (sets) {
        $(sets).each(function () {
            $('<div id="' + this.name + '" class="set"/>')
                .text(this.name)
                .appendTo("#collection");
        });
    }).then(function () {
        $.getJSON("https://api.deckbrew.com/mtg/cards").then(function (cards) {
            $(cards).each(function () {
                $('<div id="' + this.name + '" class="card"/>')
                    .text(this.name)
                    .appendTo("#" + this.editions[0].set);
            });
        });
    });
});

或者，更快一点（端到端时间）将是同时启动两个请求，然后按顺序处理结果。 再次使用jQuery承诺将对此进行管理：

$(document).ready(function(){
    $.when(
        $.getJSON("https://api.deckbrew.com/mtg/sets"), 
        $.getJSON("https://api.deckbrew.com/mtg/cards")
    ).then(function(r1, r2) {
        // process sets
        var sets = r1[0];
        $(sets).each(function() {
          $('<div id="' + this.name + '" class="set"/>')
          .text(this.name)
          .appendTo("#collection");
        });

        // process cards
        var cards = r2[0];
        $(cards).each(function(){
          $('<div id="' + this.name + '" class="card"/>')
          .text(this.name)
          .appendTo("#" + this.editions[0].set);
        });
    });
});

最后一个方案使用$.when()告诉我们两个ajax调用何时完成，并且还为我们排序结果，而不管哪个实际上先完成。

Answer 2

要依次运行getJSONS，请在第一个的回调中运行第二个

像这样

$(document).ready(function() {
    $.getJSON("https://api.deckbrew.com/mtg/sets", function(sets) {
        $(sets).each(function() {
            $('<div id="' + this.name + '" class="set"/>')
                .text(this.name)
                .appendTo("#collection");
        });
        $.getJSON("https://api.deckbrew.com/mtg/cards", function(cards) {
            $(cards).each(function() {
                $('<div id="' + this.name + '" class="card"/>')
                    .text(this.name)
                    .appendTo("#" + this.editions[0].set);
            });
        });
    });
});

就个人而言，我将使用@ jfriend00的promise方法-我将在此答案中添加该方法，但是他同时回答了，因此，请使用该更灵活的方法

Answer 3

编辑由于您说过尝试依次使用两个getJSON方法，因此可以通过使用DOMNodeInserted事件使第二个调用在第一个调用之后工作

好吧，也许一个解决方案是使用DOMNodeInserted事件，因为您要附加到#collection

所以：

$("#collection").on('DOMNodeInserted',function(){

    $.getJSON...
});

根据DOCS

DOMNodeInserted

当一个节点被添加为另一个节点的子节点时触发。 插入发生后调度此事件。 此事件的目标是要插入的节点。