デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

deferred.done( )正常終了したら実行する処理を設定

構文

正常終了したら実行する処理を設定返値:deferredオブジェクト
deferred.done( function [,function] )ver1.5〜

機能

deferredオブジェクト(promiseオブジェクトとjqXHRオブジェクトを含む)に設定された処理が正常終了したら実行する処理を設定します。引数のfunctionは複数設定でき、その場合はカンマで区切って設定します。また複数のfunctionを含んだ配列を利用する事も可能です。

処理が異常終了した時に実行する処理はdeferred.failメソッドを利用して設定します。

解説

promiseオブジェクトに利用する

まずは複数のアニメ処理が設定されたpromiseオブジェクトに利用しました。サンプル(done/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。

jQueryは、まず以下の部分を確認してください。jQuery.whenメソッドを利用して、2つのアニメが設定されたpromiseオブジェクトを作成し、変数myPromiseに代入しています。

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

続いて以下の部分を確認して下さい。上記で作成されたpromiseオブジェクトに対しdoneメソッドを利用して、処理が完了した時の処理を設定しています。サンプルではdiv要素に「DONE!」と表示するようにしています。

myPromise.done(function() {
	$("div").text("DONE!")
});

結果として、buttonをクリックするとアニメが開始され、2つのアニメが完了するとdiv要素に「DONE!」と表示されます。

サンプルdone/01.htmlでは分かりやすくpromiseオブジェクトを変数myPromiseに代入して利用しましたが、メソッドチェーンを利用してjQuery.whenメソッドとdoneメソッドを連結することができます。
→参考:サンプル(done/01b.html

$.when(
	$("div").animate({left:300}),
	$("div").animate({top:300})
).done(function() {
	$("div").text("DONE!")
});

jqXHRオブジェクトに利用する

通信関連のメソッドが返すjqXHRオブジェクトにはpromiseオブジェクトが含まれるので、jqXHRオブジェクトに対してもdoneメソッドが利用できます。

サンプル(done/02.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryは以下の様に記述され、2行目のjQuery.getメソッドを利用してサーバ上にあるデータを読み込んでいます。jQuery.getメソッドの返値はjqXHRオブジェクトで、これを変数jqXHRに代入しておきます。

3行目でjqXHRオブジェクトに対しdoneメソッドを利用して、処理が完了した時の処理を設定しています。サンプルではdiv要素に受け取ったデータを表示するようにしています。doneメソッドで設定したfunctionが受け取る引数(サンプルではmyData)はjQuery.getメソッドに設定するfunctionと同じです。

$("button").click(function(){
	var jqXHR = $.get("../data/simple.txt");
	jqXHR.done(function (myData){
		$("div").html(myData);
	});
});

結果として、buttonをクリックするとサーバからデータを取得し、通信が完了するとdiv要素に受信したデータを表示します。

サンプルdone/02.htmlでは分かりやすくjqXHRオブジェクトを変数jqXHRに代入してい利用しましたが、メソッドチェーンを利用してjQuery.getメソッドとdoneメソッドを連結することができます。
→参考:サンプル(done/02b.html

$.get("../data/simple.txt").done(function (myData){
	$("div").html(myData);
});

関連項目

処理が異常終了した時の設定はdeferred.failメソッドで設定します。
処理が成功でも失敗でも実行する処理の設定はdeferred.alwaysメソッドで設定します。
処理中の設定はdeferred.progressメソッドで設定します。

メモ

アニメには異常終了は無い?

doneメソッドが正常に終了した時にしか実行されないことを確認するサンプルを作成したのですが、アニメでは予想と反する結果になったのでメモ。

まずは通信(jqXHRオブジェクト)は予想通りの結果になりました。通信の場合、doneメソッドは読込に失敗した場合実行されません。サンプル(done/test01.html)を開いてbody内の構成はdone/02b.htmlと同じ事を確認してください。

jQueryは以下の様にURLが「test.txt」に変更されているのを確認してください。このデータは存在しないためエラーとなります。またdoneメソッドで設定しているfunctionの処理はアラートで「fail!」と表示だけするようにしました。

$.get("../data/test.txt").done(function (myData){
	alert("fail!");
});

実際にbuttonをクリックしてもアラートが表示されないことから、doneメソッドはエラー時には実行されないことが確認でき、これは予想通りです。

ではアニメのサンプルを確認します。サンプル(done/test02.html)を開いてbody内のbuttonが2つに増えていることを確認してください(id属性はstartとstop)。

<button id="start">start</button>
<button id="stop">stop</button>
<div></div>

startボタンに設定した処理はdone/01.htmlと殆ど同じですが、アニメの再生時間を長くしています(stopボタンを押しやすいように)。stopボタンに設定した処理は以下の様にdiv要素のアニメをstopメソッドで停止するだけです。

$("#stop").click(function(){
	$("div").stop(true,true);
});

私はアニメを途中で停止させると「異常終了と扱われdoneの処理は実行されない」と思っていたのですが、実際は異なりました。startボタンをクリックしてアニメが停止しないうちにstopボタンをクリックしてください。div要素内に「DONE!」と表示されます。

アニメ(promiseオブジェクト)においては異常終了というのは無いのでしょうか?stop等で停止されたらfailメソッドで設定した処理を実行してくれた方が便利なような気もします。

単体のアニメには異常終了があります

前項の通りwhenメソッドを利用した複数のアニメ処理では、stopメソッドを利用しても異常終了にはなりません。しかしanimateメソッド単体ではstopメソッドによる異常終了を検知できます。

サンプル(done/test03.html)を開いてstartボタンの処理が以下の様に変更されているのを確認してください。whenメソッドは利用せず、アニメ処理が1つだけ記述されています。ポイントは引数に設定したanimeObjです。

$("#start").click(function(){
	$("div").animate({left:300},animeObj)
});

v1.8から演出のメソッドにはdeferredオブジェクトの仕組みが導入され、利用できるプロパティが増えたのです。

今回のサンプルでは以下の様にfailプロパティとdoneプロパティを利用して、正常終了と異常終了の処理を設定しました。正常終了すればdiv要素内に「DONE!」と表示し、異常終了すれば「FAIL!」と表示します。

var animeObj = new Object();
animeObj.duration = 3000;
animeObj.fail = function (){
	$("div").text("FAIL!")
}
animeObj.done = function (){
	$("div").text("DONE!")
}

実際にstartボタンをクリックしてからstopボタンをクリックして下さい。きちんと異常終了となりdiv要素内に「FAIL!」と表示されます。また最後までstopボタンをクリックしなければ「DONE!」と表示されます。

animateメソッドのdeferredオブジェクト関連の機能は以下の項目で紹介しています。
stopメソッドで停止された時の処理
stopメソッドを利用してもfailにならないケース
promiseオブジェクトの利用
アニメ前に実行する処理を設定