Deferredでajaxの処理を直列つなぎにするときのTips。
ajaxの処理はsetTimeoutで代用したけど、ajaxでも同じことができる。
ソースをコピペするとdivの中にexec1 exec2 exec3 と表示される。
ajaxで取得したデータをもとにまたajaxといった時に使える(はず)。
test.html
<div id="content">
</div>
deferredTest.js
exec1().then(exec2).then(exec3);
function exec1(){
var def = new $.Deferred();
//ajaxの処理と仮定
setTimeout(function(){
$('div#content').append('<p>exec1</p>');
def.resolve();
},3000);
return def.promise();
}
function exec2(){
var def = new $.Deferred();
//ajaxの処理と仮定
setTimeout(function(){
$('div#content').append('<p>exec2</p>');
def.resolve();
},2000);
return def.promise();
}
function exec3(){
var def = new $.Deferred();
//ajaxの処理と仮定
setTimeout(function(){
$('div#content').append('<p>exec3</p>');
def.resolve();
},1000);
return def.promise();
}