jQueryで、順番に実行が出来る .when() から .done() が便利だったのでメモ

JavascriptやjQueryを書いていると、「この処理がちゃんと終わってから、こっちの処理を始めたい！」って場面に結構遭遇するのではないかと思います。特にアニメーションを作っているときによくあるのではないでしょうか。
コールバック関数を設定出来る処理なら簡単なのですが、それがないものも結構あったりします。僕が困ったのは.html()や.ajax()でした。なんかいい解決策は無いかなーとググってみたところ.when().done()という処理の仕方が良さげだったので使ってみたらばっちりでした。

.when()には先に終わらせたい処理を書く

ざっくりとした説明の仕方をすると、.when()には先に完了させたい処理をまとめて書いておきます。例えば、“横に移動したら、フェードアウトする”みたいな事をしたい場合、“横に移動したら”の部分を.when()の中には書きます。

（まあ、そんな簡単な動きなら普通にanimateだけで出来ますが例えということで…）

var myPromise = $.when(
  //ここに先に終わらせたい処理を書きます。複数書いても大丈夫です。
  $(img).animate({left:600})
);

.done()には後で実行したい処理を書く

.when()で先に実行したい処理を登録したら、次は.done()に後に実行する処理を登録します。このとき.done()は.when()を代入した変数につけます。

myPromise.done(function() {
  //ここに、後に実行したい処理を書きます
  $(img).fadeOut()
});

ふたつはメソッドチェーンでも繋げられる

前述ではふたつを分けて書きましたが、これら２つはメソッドチェーンで繋げる事が可能です。個人的にはこっちの方が使い方のイメージに合っている気がして好きです。

$.when(
  $.ajax({
    type: 'GET',
    url: file,
    dataType: 'html',
    success: function(data) {
      $('#memo').html(data);
    },error:function() {
 　　　alert('読み込みエラーです');
    }
  })
).done(function() {
  $('#memo_btn').click(function(){
    alert('ボタンが押されました');
  });
});

.when()と.done()は上記のように.ajax()で後から読み込んだ部分にイベントを付与したりするのにも使えますね。最近のページ遷移をしないサイトでは結構出番があるんじゃないでしょうか。

では！

Web制作の現場で使う jQueryデザイン入門［改訂新版] (アスキー書籍)
ー Amazon.co.jpで買う