Ajaxのコールバックはチェーン

Question

に私は自分のサイト上のナビゲーションバーを抱えている、それはいくつかのチェーンで構築されています：

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

それはOKだ、と私のために正常に動作します。しかし、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が非同期に働いていないことができ、同時に.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(); }); 

あなたはajax()によって返さdeferred objectを返却し、それにdone()を呼び出すことができますので、あなたは、fetchData()関数にコールバックを導入する必要はありません - documentationを参照してください。

エラーを処理する場合は、fail()とthen()も参照してください。

Answer 2

あなたの）データが入ってくるとき、それはbuildHTMLを（呼び出します、そして、メソッド

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

をフェッチ