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

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

deferred.notify( )progressメソッドで指定したfunctionを実行

構文

progressメソッドで指定したfunctionを実行返値:deferredオブジェクト
deferred.notify( [引数] )ver1.7〜

機能

deferred.notifyメソッドは、defferdオブジェクトに利用するとdeferred.progressメソッドで設定したfunctionを実行します。「引数」はdeferred.progressメソッドで設定したfunctionの引数に送りたい値を設定します。

deferred.notifyメソッドは指定したdeferredオブジェクトが「pending」の状態でしか機能しません。すでに処理が終了した「resolved」や「rejected」の状態では無視されます。

解説

progressメソッドで指定したfunctionを実行する(引数なし)

サンプル(notify/01.html)を開いてbody内に何も要素がないことを確認してください。
jQueryでは、まず以下の部分を確認してください。1行目ではdeferredオブジェクト「dfd」を作成し、2〜4行目でdeferred.progressメソッドを利用して、pending中の処理を設定しています。ここではappnedメソッドを利用してbody要素内に■を追加していきます。

var dfd = $.Deferred();
dfd.progress(function(){
	$("body").append("■");
});

続いて以下の部分を確認してください。1行目でjavaScriptのsetIntervalメソッドを利用してtestFuncを0.5秒おきに実行しています。testFuncは2〜4行目で作成され、作成したdeferredオブジェクトに対しdeferred.notifyメソッドを利用して、上記のdeferred.progressメソッドで設定した処理を実行しています。

setInterval(testFunc,500);
function testFunc(){
	dfd.notify();
};

結果として、0.5秒おきにbody内に■が追加されていきます。

progressメソッドで指定したfunctionを実行する(引数あり)

deferred.notifyメソッドは引数で情報を送ることができます。サンプル(notify/02.html)を開いてbody内の構成がnotify/01.htmlと同じ事を確認してください。

jQueryは少し変更されており、まず変数cntが作成されています。
そしてdeferred.progressメソッドは引数「vol」を受け取りbody要素に追加するようにしています。

var cnt=0;
var dfd = $.Deferred();
dfd.progress(function(vol){
	$("body").append(vol);
});

deferred.notifyメソッドの部分は以下の様に変更され、testFuncが実行される度に変数cntが1ずつ増えるようにしました。変数cntはdeferred.notifyの引数に設定され、上記deferred.progressメソッドで設定されたfunctionに渡されます。

setInterval(testFunc,500);
function testFunc(){
	cnt++;
	dfd.notify(cnt);
};

結果として、■が追加されるのではなく数字が追加されていきます。数字は1ずつ増えていきます。
引数はカンマで区切って複数渡すことができます。→参考:サンプル(notify/02b.html

dfd.progress(function(vol, add){
	$("body").append(vol + add);
});
function testFunc(){
	cnt++;
	dfd.notify(cnt, "-");
};

defferdオブジェクトがpendingの状態の時にしか機能しません

deferred.notifyメソッドはdefferdオブジェクトがpendingの状態の時にしか機能しません。処理が完了してresolvedやrejectedの状態の時に実行しても無視されます。サンプル(notify/03.html)を開いてbody内にbutton要素が追加されたことを確認してください。

jQueryはサンプルnotify/01.htmlに以下の処理を追加しただけです。buttonをクリックするとdefferdオブジェクトにdeferred.resolveメソッドを実行して処理を完了させています。また、処理の完了が確認しできるようにappnedメソッドでbody内に「resolve!」と表示するようにしました。

$("button").click(function(){
	dfd.resolve();
	$("body").append("resolve!");
});

結果として、buttonをクリックするとdefferdオブジェクトの処理が完了するため、deferred.notifyメソッドで設定したfunctionの実行が無視され、■が追加されないようになります。
サンプルをシンプルにするためsetIntervalの処理を止めていません。そのため実行できなくても0.5秒おきにdeferred.notifyメソッドは実行され続けています。

関連項目

引数としてコンテキスト(thisとして利用するobject)を渡したい場合はdeferred.notifyWithメソッドを利用してください。