Ajax обратного вызова в цепочке

Question

У меня панель навигации на моем сайте, и он строится в некоторой цепи:

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

Это нормально, и отлично работает для меня. Но в методе fetchData я использую локальные данные для загрузки (inline 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 асинхронно и в то же время ожидать .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() функции, потому что вы можете вернуть deferred object возвращаемый ajax(), а затем вызвать done() на нем - см documentation.

См. Также fail() и then(), если вы хотите обрабатывать ошибки.

Answer 2

ли что-то подобное в вашей выборки Метод

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

Затем, когда данные приходит, он будет вызывать buildHTML()