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

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

deferred.progress( )処理の実行中に実行する処理を設定

構文

処理の実行中に実行する処理を設定返値:deferredオブジェクト
deferred.progress( function )ver1.7〜

機能

defferdオブジェクトでdeferred.notifyメソッドdeferred.notifyWithメソッドによって、処理が実行中であることを通知された時に実行する処理を(引数にfunctionとして)設定します。

v1.7から追加された比較的新しいdeferredの機能で、他のイベントハンドラメソッドと異なり引数には1つのfunctionしか設定できませんが、複数のfunctionを設定した配列が利用できます。

whenメソッドで作成されたpromiseオブジェクトやjqXHRオブジェクトにはnotifyメソッドやnotifyWithメソッドの実行は含まれていないため、これらにはprogressメソッドを設定しても意味がありません(メモにサンプルがあります)。つまり自作のdeferredオブジェクトを作成した時にしか利用できません。

解説

自作したdeferredオブジェクトに利用する

progressメソッドは、deferred.notifyメソッドを利用した自作のdeferredオブジェクトに利用します。サンプル(progress/01.html)を開いてbody内に何も要素がないことを確認してください。

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

var dfd = new jQuery.Deferred();
setInterval(testFunc,500);
function testFunc(){
	dfd.notify();
};

続いて以下の部分を確認してください。ここでdeferred.progressメソッドを利用して、処理が実行中の処理を設定しています。サンプルではappnedメソッドを利用してbody要素内に■を追加していきます。

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

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

関連項目

処理が正常終了した時の設定はdeferred.doneメソッドで設定します。
処理が異常終了した時の設定はdeferred.failメソッドで設定します。
処理が成功でも失敗でも実行する処理の設定はdeferred.alwaysメソッドで設定します。

メモ

whenメソッドで作成したpromiseオブジェクトではprogressメソッドが利用できない

jQuery.whenメソッドを利用すれば簡単にpromiseオブジェクトが作成できます。そのようにして作成したpromiseオブジェクトにprogressメソッドが利用できるか確認しました(結果はダメでした)。

サンプル(progress/test01.html)を開いてbody内にdiv要素とbutton要素があることを確認してください。jQueryでは、まず以下の部分を確認してください。jQuery.whenメソッドを利用して2つのアニメ処理を含んだpromiseオブジェクト「myPromise」を作成しています。

var myPromise = $.when(
	$("div").animate({left:300}),
	$("div").animate({top:300})
);

そして、作成したpromiseオブジェクト「myPromise」にprogressメソッドを設定して、処理中にdiv要素に「progress!」と表示するようにしました。

myPromise.progress(function() {
	$("div").text("progress!");
});

しかしbuttonをクリックして、アニメを開始してもdiv要素内には何も表示されません。このことからwhenメソッドで作成したpromiseオブジェクトにはprogressメソッドが利用できない事が確認できます。

アニメの処理中に何か実行したい場合は、animateメソッドの持つ機能を利用しましょう。
→リファレンス:.animate( prop, option )「アニメ中の処理を設定

jqXHRオブジェクトにも利用できません

jqXHRオブジェクトでも利用できるか確認しました(結果はダメでした)。
サンプル(progress/test02.html)を開いてbody内にdiv要素とbutton要素があることを確認してください。jQueryではbuttonがクリックされたら、以下のような処理を行うようにしました。

$.get("../data/simple.txt").progress(function() {
	alert("progress");
}).done(function (myData){
	$("div").html(myData);
});

まずgetメソッドで外部データ「simple.txt」を読み込みます。getメソッドはjqXHRオブジェクトを返すので、メソッドチェーンでprogressメソッドを連結し、もし処理中のであることが知らされたらアラートで「progress!」と表示するようにしました。

さらにメソッドチェーンでdoneメソッドを連結し、処理が正常終了したらdiv要素内に読み込んだデータを表示するようにしました。実際にbuttonをクリックするとdoneメソッドで設定した処理は実行されますが、progressメソッドで設定した処理は実行されません。

このことからjqXHRオブジェクトにはprogressメソッドが利用できない事が確認できます。

自作deferredオブジェクトでのprogress

解説で紹介するサンプルとして作成したのですが、すこし複雑になったのでメモでのご紹介。アニメの再生中にprogressメソッドで設定した処理を実行する、自作deferredオブジェクトを作成しました。
→サンプル(progress/test03.html

ソースにコメントで簡単な説明を書いたので、興味のある方は確認してみてください。クロージャを利用してpromiseオブジェクトを作成しています。この手法についてはdeferredメソッド「クロージャを利用する」で説明しています。合わせて確認してください。