View on GitHub

akkunchoi.github.com

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