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

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

deferred.state( )deferredオブジェクトの状態を取得

構文

deferredオブジェクトの状態を取得返値:文字列
deferred.state( )ver1.7〜

機能

deferred.stateメソッドはdefferdオブジェクト(promise/jqXHRを含む)の状態を取得します。deferredオブジェクトはpending(未処理)、resolved(正常終了)、rejected(異常終了)の3種類の状態を持ちます。

解説ではdeferredオブジェクトを例にした簡単なサンプルで説明しています。メモではアニメ(promiseオブジェクト)や通信(jqXHRオブジェクト)を例にして説明しています。

解説

deferredオブジェクトの状態を取得(pennding編)

サンプル(state/01.html)を開いてbody内にbutton要素しかないことを確認してください。jQueryは以下の様に記述され、1行目でdeferredオブジェクト「dfd」を作成し、2〜4行目でbuttonをクリックしたらdeferred.stateメソッドの値をアラートで表示するようにしています。

var dfd = $.Deferred();
$("button").click(function(){
	alert(dfd.state());
});

deferredオブジェクトは何も処理されていないので、buttonをクリックするとアラートで「pennding」と表示されます。

deferredオブジェクトの状態を取得(resolved編)

サンプル(state/02.html)を開いて、ほとんどstate/01.htmlと同じ事を確認してください。異なるのは以下の様にdeferredオブジェクトを作成した後でdeferred.resolveメソッドを実行してdeferredオブジェクトの処理を正常終了させている点だけです。

var dfd = $.Deferred();
dfd.resolve();
$("button").click(function(){
	alert(dfd.state());
});

結果として、buttonをクリックするとアラートで「resolved」と表示され、deferredオブジェクトの処理が完了していることが確認できます。

deferredオブジェクトの状態を取得(rejected編)

サンプル(state/03.html)を開いて、ほとんどstate/01.htmlと同じ事を確認してください。異なるのは以下の様にdeferredオブジェクトを作成した後でdeferred.rejectメソッドを実行してdeferredオブジェクトの処理を異常終了させている点だけです。

var dfd = $.Deferred();
dfd.reject();
$("button").click(function(){
	alert(dfd.state());
});

結果として、buttonをクリックするとアラートで「rejected」と表示され、deferredオブジェクトの処理が異常終了していることが確認できます。

メモ

通信(jqXHRオブジェクト)の例

指定したデータの読込がすでに完了したかをチェックするサンプルを作成しました。
サンプル(state/test01.html)を開いてbody内にbutton要素が2つ(id属性はgetとcheck)とdiv要素があることを確認してください。

<button id="get">get</button>
<button id="check">check</button>
<div></div>

jQueryでは、まず以下の部分を確認してください。getボタンをクリックするとgetメソッドを利用して外部データを読み込むようにしています。getメソッドの返値はjqXHRオブジェクトで、これを変数「jqXHR」に代入しておきます。

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

続いて以下の部分を確認してください。checkボタンをクリックしたら、jqXHR(jqXHRオブジェクト)に対してstateメソッドを利用し、この結果をアラートで表示するようにしています。

$("#check").click(function(){
	alert(jqXHR.state());
});

ではgetボタンをクリックしてデータを読み込んだ後に、checkボタンをクリックしてください。読込が完了しているので、アラートで「resolved」と表示されます。ちなみに先にcheckボタンをクリックしても何も表示されません。これはjqXHRオブジェクトが作成される前だからです。作成される前に状態を確認することはできません。

一応pendingのサンプルも作成しました。サンプル(state/test01b.html)を開いて、getボタンの処理に1行追加されていることを確認してください。読込を実行したすぐ後でアラートを表示するようにしました。この処理は読込が完了する前に実行されると思うので、getボタンをクリックするとアラートで「pending」と表示されると思います。

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

最後に異常終了の例も確認しておきます。サンプル(state/test01c.html)を開いて、読み込むデータが「no.txt」に変更されていることを確認してください。このデータは存在していないため、読み込めずに異常終了します。

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

まずgetボタンで読込を実行した後に、checkボタンをクリックしてください。読み込めなかったためアラートで「rejected」と表示されます。

アニメ(promiseオブジェクト)の例

アニメが完了したかをチェックするサンプルを作成しました。サンプル(state/test02.html)を開いてbody内にbutton要素が2つ(id属性はanimeとcheck)とdiv要素があることを確認してください。

<button id="get">get</button>
<button id="check">check</button>
<div></div>

jQueryでは、まず以下の部分を確認してください。animeボタンをクリックするとwhenメソッドを利用して2つのアニメからpromiseオブジェクトを作成し、これを変数「myPromise」に代入しています。

$("#anime").click(function(){
	myPromise = $.when(
		$("div").animate({left:300},1000),
		$("div").animate({top:300},1000)
	);
});

続いて以下の部分を確認してください。checkボタンをクリックしたら、myPromiseに対してstateメソッドを利用し、この結果をアラートで表示するようにしています。

$("#check").click(function(){
	alert(myPromise.state());
});

ではanimeボタンをクリックしてアニメを開始してください。そしてアニメの途中でcheckボタンをクリックし、アラートで「pending」と表示されるのを確認してください。また、アニメが終わってからもcheckボタンをクリックしてください。アニメが完了していればアラートで「resolved」と表示されます。

このようにstateメソッドはjqXHRオブジェクトやpromiseオブジェクトの状態も取得できるので、アニメや通信がすでに完了したかをチェックすることができます。