【jQuery】処理する順番を指定するwhen()とdone()の使い方

jQueryで、Aの処理がちゃんと終わってからBの処理をを実行しないと、エラーが出てしまうなどで、jQueryで処理の順番を指定したいときに便利な「.when()」と「.done()」の使い方。

jQuery関連記事

• 

  【jQuery】pdfが存在するか、mimeタイプのバリデーションする

• 

  jQuery UIのsortableを使ってリストをドラッグで並び替える

• 

  jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する

• 

  HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

• 

  bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種

• 

  bxSliderの使い方と、オプションでのカスタマイズ方法

• 

  select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

• 

  jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する

• 

  jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる

.when()で、最初に実行するものを指定

最初に実行したい処理を.when()の中に書きます。
.when()で実行したい処理は複数書けるので、書くときは,（カンマ）で区切ります。

JavaScript

var myPromise = $.when(
	$("div").animate({left:300})
);

.done()は次に実行する処理を指定

.when()で指定した処理が終わった後に実行したい処理を.done()の中に書きます。
.done()も、実行したい処理は複数書けるので、書くときは,（カンマ）で区切ります。

JavaScript

myPromise.done(function() {
	$("div").fadeOut()
});

.fail()で処理が失敗した場合を指定

.when()もしくは.done()の処理が失敗した場合、.fail()を指定するとその処理を実行することができます。

JavaScript

myPromise.fail(function() {
	console.log('error');
});

.when()と.done()をメソッドチェーンでつなげて書く

.when()と.done()の処理をメソッドチェーンで繋げる事ができます。
この書き方の方がわかりやすくなりますね。

JavaScript

$.when(
	$("div").animate({left:300})
)
.done(function() {
	$("div").fadeOut()
})
.fail(function() {
	console.log('error');
});