すぐわからなくなるので基本的なところだけメモ。
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