すぐわからなくなるので基本的なところだけメモ。

async(function() {
    console.log('async');
});
console.log('hoge');

/**指定した関数を 1 秒後に実行する*/
function async(f) {
    setTimeout(f, 1000);
}

これを実行すると、

実行結果

hoge
async

とコンソールに出力される。

しかし、どうしても非同期処理の後で hoge を出力させたい場合に Deferred を使う。

var d = new $.Deferred();

async(function() {
    console.log('async');
    d.resolve();
});

d.promise().then(function() {
    console.log('hoge');
});

/**指定した関数を 1 秒後に実行する*/
function async(f) {
    setTimeout(f, 1000);
}

実行結果

async
hoge

new $.Deferred() で Deferred のオブジェクトを生成する。
非同期処理が完了した時点で、生成しておいた Deferred オブジェクトの resolve() メソッドを実行する。
Deferred オブジェクトの promise() メソッドを実行し、その戻り値（promise オブジェクト）の then() メソッドに非同期処理の後に実行したい処理を渡す。

then() はメソッドチェーンができるので、

var d = new $.Deferred();

async(function() {
    console.log('async');
    d.resolve();
});

d.promise()
.then(function() {
    console.log('hoge');
})
.then(function() {
    console.log('fuga');
});

/**指定した関数を 1 秒後に実行する*/
function async(f) {
    setTimeout(f, 1000);
}

という風に書ける。

実行結果

async
hoge
fuga

ただし、このままだと２つ目の then() は１つ目の then() が終了するとすぐ実行される。

なので、

var d = new $.Deferred();

async(function() {
    console.log('async');
    d.resolve();
});

d.promise()
.then(function() {
    // ★１つ目の then() が非同期処理
    async(function() {
       console.log('hoge'); 
    });
})
.then(function() {
    console.log('fuga');
});

/**指定した関数を 1 秒後に実行する*/
function async(f) {
    setTimeout(f, 1000);
}

こんな実装になっていると、

実行結果

async
fuga
hoge

となる。

１つ目の then() の非同期処理が終わってから２つ目の then() を実行したい場合は、１つ目の then() で新しい promise オブジェクトを返す。

var d = new $.Deferred();

async(function() {
    console.log('async');
    d.resolve();
});

d.promise()
.then(function() {
    var d2 = new $.Deferred();

    async(function() {
        console.log('hoge');
        d2.resolve();
    });

    return d2.promise();
})
.then(function() {
    console.log('fuga');
});

/**指定した関数を 1 秒後に実行する*/
function async(f) {
    setTimeout(f, 1000);
}

実行結果

async
hoge
fuga

jQueryのDeferredの基本的な使い方メモ

参考