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

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

deferred.resolveWith( )deferredオブジェクトの状態を正常終了に移行

構文

deferredオブジェクトの状態を正常終了に移行返値:deferredオブジェクト
deferred.resolveWith( コンテキスト [,配列] )ver1.5〜

機能

deferred.resolveWithメソッドを学ぶためには、deferred.resolveメソッドを先に確認してください。

deferred.resolveWithメソッドはdeferred.resolveメソッドと同様に、defferdオブジェクトの状態を「正常終了」にして、deferred.doneメソッドで設定したfunctionを実行します。

deferred.resolveメソッドと異なるのは引数の設定です。コンテキストにはdeferred.doneメソッドで設定したfunction内でthisとして利用したい要素を設定します。また、deferred.resolveメソッドと同じように引数を渡すことができますが引数は配列で渡すことに注意して下さい。

解説

thisとして利用したい要素を指定する

サンプル(resolveWith/01.html)を開いてbody内にbutton要素とdiv要素があることを確認してください。jQueryでは、まず以下の部分を確認してください。1行目でdeferredオブジェクト「dfd」を作成し、2〜4行目でdeferred.doneメソッドを利用して、処理が完了した時の処理を設定しています。

ここでのポイントは3行目の「this」です。deferred.resolveWithメソッドでは、このthisの内容を設定することができます。つまり3行目の処理は、deferred.resolveWithメソッドの引数で指定された要素内に「done」と表示することになります。

var dfd = $.Deferred();
dfd.done(function(){
	this.append("done");
});

ではdeferred.resolveWithメソッドを実行している以下の部分を確認してください。deferred.resolveWithメソッドの引数として「$("div")」が設定されているので、上記のthisは「$("div")」となります。

$("button").click(function(){
	dfd.resolveWith($("div"));
});

結果として、buttonをクリックするとdiv要素内に「done」と表示されます。

引数は配列で送ることに注意

deferred.resolveメソッドと同じように、deferred.doneメソッドで設定したfunctionに引数を送ることができます。ただし配列で引数を送ることに注意してください。サンプル(resolveWith/02.html)を開いてbody内の構成がresolveWith/01.htmlと同じ事を確認してください。

jQueryは少し変更されており、以下の様にdeferred.doneメソッドで設定したfunctionで引数を受け取るようにしています。引数は変数strで受け取り、3行目のappendメソッドによってthisの要素内に表示されます。

var dfd = $.Deferred();
dfd.done(function(str){
	this.append(str);
});

引数を渡すdeferred.resolveWithメソッドは以下の様に記述され、第2引数に配列を設定しています。このように値が1つでも配列で渡さなければなりません

$("button").click(function(){
	dfd.resolveWith($("div"), ["done!"]);
});

結果として、buttonをクリックするとdiv要素内に引数で渡した「done!」が表示されます。

関連項目

コンテキストを渡す必要がない場合はdeferred.resolveメソッドを利用してください。