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

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

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

構文

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

機能

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

解説

jqXHRオブジェクトに利用する(成功編)

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

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

3行目でjqXHRオブジェクトに対しalwaysメソッドを利用して、処理が終了した時の処理を設定しています。サンプルではdiv要素にステータスを表示するようにしています。ステータスはjQuery.getからfunctionの引数「myStatus」に渡されます。詳細はjQuery.getメソッドのページで確認してください。

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

結果として、buttonをクリックするとデータの読込が成功してdiv要素に「success」と表示されます。

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

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

jqXHRオブジェクトに利用する(失敗編)

alwaysメソッドは失敗した時も実行されるので、失敗した時のサンプルも確認します。
サンプル(always/02.html)を開いて、ほとんどalways/01b.htmlと同じ事を確認してください。

異なるのは以下の様にjQuery.getメソッドで読む込むファイルが、存在しない「none.txt」に変更されているだけです。結果としてbuttonをクリックすると読込に失敗しますが、alwaysメソッドは失敗しても実行されるため,div要素にステータス「error」が表示されます。

$.get("../data/none.txt").always(function (myData, myStatus){
	$("div").html(myStatus);
});

関連項目

処理が正常終了した時の設定はdeferred.doneメソッドで設定します。
処理が異常終了した時の設定はdeferred.failメソッドで設定します。
処理中の設定はdeferred.progressメソッドで設定します。

メモ

実際の使いどころ

通信の処理では正常終了/異常終了にかかわらず実行する処理というのは、少なからず必要になってきます。そのような処理を効率よく記述するためにalwaysメソッドが用意されたのでしょう。

サンプル(always/test01.html)を開いてbody内にbutton要素とdiv要素があることを確認してください。jQueryでは、最初div要素がhideメソッドで表示しないようにしてあります。

$("div").hide();

そしてbuttonをクリックされたら以下のようにjQuery.getメソッドを利用して外部データを読み込むようにしてあります。そしてメソッドチェーンで連結したdoneメソッド(正常終了した時の処理)、failメソッド(異常終了した時の処理)、alwaysメソッド(正常/異常にかかわらず終わった時の処理)を設定しています。

$.get("../data/none.txt").done(function(){
	$("div").text("DONE!");
}).fail(function(){
	$("div").text("FAIL!");
}).always(function (){
	$("div").slideDown();
});

大抵の通信処理は、正常終了/異常終了にかかわらず実行したい処理があるものです。このサンプルではhideメソッドで隠されたdiv要素をslideDownメソッドで表示する処理です。

このサンプルで、もしalwaysメソッドを利用しなかったらどうなるかを確認しましょう。
サンプル(always/test01b.html)を開いて、buttonをクリックした時の処理が以下のように変更されているのを確認してください。

$.get("../data/none.txt").done(function(){
	$("div").text("DONE!");
	$("div").slideDown();
}).fail(function(){
	$("div").text("FAIL!");
	$("div").slideDown();
});

もしalwaysメソッドを利用しなかったら、上記のようにdiv要素を表示する処理(3,6行目)を2ヶ所に記述しなくてはならず、修正の際にも2ヶ所修正しなければなりません。これでは修正し忘れなどの危険もあり、プログラム的によくありません。だからalwaysメソッドを利用して処理をまとめるのです。

この例からも、alwaysメソッドの有用性が理解できるのではないでしょうか?正常終了/異常終了にかかわらず終了したら実行したい処理はalwaysメソッドを利用して、まとめて設定するようにしましょう。