Ajax 链式回调

Question

我的网站上有一个导航栏，它是在某个链中构建的：

// in Init method
nav
    .hideContainer()
    .fetchData()
    .buildHTML()
    .eventify()
    .showContainer();

没关系，并且对我来说工作得很好。但在 fetchData 方法中，我使用本地数据来加载（内联 json）。但现在，我需要获取远程数据（来自 ajax 调用）。我可以在不更改 Init 方法的情况下完成它吗？

我尝试通过同步 ajax 调用来做到这一点：

// in fetchData() method
var data;
$.ajax ({
     async: false,
     url : '/some/url/',
     success : function(res) {
         data = res;
     }
});
return data;

但我知道，它很慢 - 它在加载时阻塞浏览器。

我知道，我可以修改我的 Init 方法，就像这样：

nav
    .hideContainer()
    .fetchData(function(){
        nav.buildHTML().eventify().showContainer()

 });

但是，我不想修改 Init 方法，我可以这样做吗？

PS 我认为我应该朝 Deffered 对象的方向发展。我说得对吗？

Answer 1

您不能让 $.ajax 异步工作，同时又期望 .fetchData() 返回您的数据。

您是对的，设置 async: false 是不好的，而更改 init() 是更好的选择，即使您失去了优雅的链接。

您可以这样更改代码：

function fetchData() {
  // ...
  return $.ajax ({
    url : '/some/url/',
    success : function(res) {
     data = res;
    }
  });
}

function init() {
  // ...
  nav
    .hideContainer()
    .fetchData()
    .done(function() {
      nav
        .buildHTML()
        .eventify()
        .showContainer(); });

您不必在 fetchData() 函数中引入回调，因为您可以返回 延迟对象由ajax()返回，然后调用done() - 参见文档。

另请参阅 fail() 和 then() 如果你想处理错误。

Answer 2

在 fetch 方法中执行类似的操作

$.ajax ({
     url : '/some/url/',
     success : buildHTML
});

然后，当数据传入时，它将调用 buildHTML()