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（）返回的内置promise是一种简单的方法：

$(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的承诺方法 - 我会在这个答案中添加它，但他同时回答，所以，采用更灵活的方法

Answer 3

修改既然你说你试图按顺序调用两个getJSON方法，那么你可以使用DOMNodeInserted事件使第一个调用工作在第一个之后

好吧也许解决方案是使用DOMNodeInserted事件，因为你追加到#collection

所以：

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

根据DOCS

<强> DOMNodeInserted

将节点添加为另一个节点的子节点时触发。这个插入发生后调度事件。的目标此事件是正在插入的节点。

进行异步jquery调用

3 个答案: