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

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

deferred.promise( )promiseオブジェクトを作成

構文

promiseオブジェクトを作成返値:promiseオブジェクト
deferred.promise( [object] )ver1.5〜

機能

deferredオブジェクトからpromiseオブジェクトを作成します。
また引数にobjectオブジェクトを指定すると、そのオブジェクトをpromiseオブジェクトとします。

このメソッドはdeferredオブジェクトを作成するdeferredメソッドと共に利用するため、先にdeferredメソッドを確認してください。

解説

promiseオブジェクトを作成する

サンプル(dPromise/01.html)を開いてbody内にbutton要素しかないことを確認してください。jQueryはまず以下の部分を確認してください。1行目でdeferredオブジェクト「defer」を作成し、2〜4行目で作成したdeferが「どの様な時に正常終了するか」を設定しています。

このサンプルでは、buttonをクリックしたら正常終了するようにしました。
deferredオブジェクトはdeferred.resolveメソッドを利用して正常終了の状態に移行させることができます。

var defer = $.Deferred();
$("button").click(function(){
	defer.resolve();
});

続いて以下の部分を確認してください。1行目でpromiseメソッドを利用し、deferrredオブジェクトからpromiseオブジェクト「myPromise」を作成しています。そして作成したpromiseオブジェクトにdoneメソッドを利用して、正常終了したらbody内に「done!」とテキストを追加するようにしました。

var myPromise = defer.promise();
myPromise.done(function(){
	$("body").append("done!");
});

deferredオブジェクトが正常終了すると、deferredオブジェクトから作成したpromiseオブジェクトも正常終了します。結果として、buttonをクリックするとbody要素内に「done!」と表示されます。

引数にターゲット名を設定する

引数にobjectオブジェクトを指定すると、そのオブジェクトをpromiseオブジェクトに変換します。すでに利用しているobjectオブジェクトがあり、それをpromiseオブジェクトにしたい時に利用するのだと思います。

サンプル(dPromise/02.html)を開いてbody内の構成がdPromise/01.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのはpromiseオブジェクトを作成する部分だけです。

var myPromise = new Object();
defer.promise(myPromise);

まず1行目でobjectオブジェクト「myPromise」を作成し、これを2行目のpromiseメソッドの引数に設定してpromiseオブジェクトに変換しています。結果としてdPromise/01.htmlと同じように、buttonをクリックするとpromiseオブジェクトが完了してbody要素内に「done!」と表示されます。

この構文の場合、先にobjectオブジェクトを作成しなければならず、構文的にもpromiseオブジェクトを作成していることが分かりにくいので、前述の構文を利用した方が良いように思います。