jQuery Deferred and $(document).ready()
$(document).ready()
の後にajaxリクエストすると、レンダリング中にムダに待機してしまいます。
$(document).ready(function(){
$.ajax('contents', function(response){
// process
});
});
ready()
内ではなく、外でajaxリクエストすれば真っ先にリクエストできます。
$.ajax('contents', function(response){
// process?
});
$(document).ready(function(){
// process?
});
しかしこれでは ajax リクエストの完了と ready になった後に実行するというのが難しくなります。無理やり実装するならばこんな感じでしょうか。
var ajaxDone = false, ready = false;
$.ajax('contents', function(response){
if (ready){
// process
}
ajaxDone = true;
});
$(document).ready(function(){
if (ajaxDone){
// process
}
ready = true;
});
カッコ悪いですし、ajaxリクエストが増えた場合に面倒ですね。
このようなコールバックのフローを上手く扱うには jQuery.Deferred を使います。この場合、次のように記述することができます。
var ready = $.Deferred();
$(document).ready(ready.resolve);
$.when(ready, $.ajax('contents')).then(function($, response) {
// process
});
参考: http://stackoverflow.com/questions/6177187/can-i-get-a-jquery-deferred-on-document-ready