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方法，我可以这样做吗？

P.S。我想我应该朝着Deffered对象的方向前进。我是对的吗？

Answer 1

在你的获取方法

中执行类似的操作

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

然后，当数据进入时，它将调用buildHTML（）

Answer 2

您不能让$.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()返回的deferred object，然后在其上调用done() - 请参阅{{3 }}

如果您想处理错误，另请参阅documentation和fail()。

链中的Ajax回调

2 个答案: