jQuery Deferred 不与 getJSON 调用异步执行

Question

我的问题是 b() 最后执行，但它应该是第二个。我想在每次点击按钮时调用一个 JSON api（并且总是发送新的 api 调用），但它应该从 div 中删除最后一个 api 消息：

$(document).ready(function() {

  function test() {

    function a() {
      $("#message-quote, #message-person").empty();
      console.log('p1');
    };

    function b() {
      console.log('p2 - before getJSON');
      $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
        $("#message-quote").append(a[0].content)
        $("#message-person").append("<p>— " + a[0].title + "</p>")
        console.log('p2 - in getJSON');
      });
    };

    function c() {
      $("body, .button, .quote-icons a").css("background-color", "red");
      $(".quote-text").css("color", "red");
      console.log('p3');
    };

    var d = $.Deferred(),
    p = d.promise();
    p.then(a()).then(b()).then(c());
    d.resolve();
  };

  $("#getMessage").on("click", function() {
    test();
  });

});

我得到的顺序是：

"p1"
"p2 - before getJSON"
"p3"
"p2 - in getJSON"

Answer 1

您不等待 b() 的返回，由于它是异步调用的，因此您需要链接承诺。

如果你从 b() 返回一个 Promise，它应该等待 getJSON 的结果返回后再继续。

另外，您的函数正在立即执行，.then(callback) 需要获取一个稍后可以执行的函数，而您可以直接执行一个函数

function b() {

      return $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
        $("#message-quote").append(a[0].content)
        $("#message-person").append("<p>— " + a[0].title + "</p>")
        console.log('p2');
        // resolve the promise, the call has been completed
      });
    };

 var d = $.Deferred(),
    p = d.promise();
    p.then(a)
     .then(b)
     //the context of .then will now be the promise out of b()
     .then(c);
    d.resolve();

注意：Promise 也需要从其他方法返回。

编辑：正如 Rocket 所指出的，jQuery Ajax 调用实现了 promise 方法

工作示例：https://jsfiddle.net/rsfxpg38/4/

你可以从这篇文章中看到一个例子： How do I chain a sequence of deferred functions in jQuery 1.8.x?