読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQuery Deferredの基礎 then()メソッドの使用例

jQuery
<スポンサーリンク>

1.基礎

Deferredは非同期処理をわかりやすいソースコードとして読み書きするための仕組みである。

Deferredはunresolved,resolved,rejectedのいずれかの状態を持つ。
初期状態はunresolvedで、状態がunresolvedである限り、皇後続の処理は実行されない。

2.サンプル

$(function() {
	function first() {
		//var d = $.Deferred();
		setTimeout(function () {
			for (var i=0; i<1000; i++) {
				console.log("hoge");
			}
			//d.resolve();
		}, 3000);
		console.log("first end");
		//return d.promise();
	}

	function second() {
		console.log("second!");
	};

	//first().then(second);
	first();
	second();
});

まずはDeferred()を使わないパターン。
こいつをブラウザなどで使うと、コンソールには以下のように表示される。
f:id:sho322:20140119174834j:plain
つまり、for文の中の処理の完了を待たずに次のsecond()の処理が走ってしまっている。

ではDeferred()を使うとどうなるか?
上のコメントを外して、Deferredを使ってみる。

$(function() {
	
	function first() {
		var d = $.Deferred();
		setTimeout(function () {
			for (var i=0; i<1000; i++) {
				console.log("hoge");
			}
			d.resolve();
		}, 3000);
		console.log("first end");
		return d.promise();
	}

	function second() {
		console.log("second!");
	};

	first().then(second);
	//first();
	//second();
});

すると、実行結果は以下のように、ちゃんとfor文の中の処理が終わるまで待っていてくれる。
f:id:sho322:20140119174843j:plain
d.resolve()の部分は、Deferredオブジェクトの状態をresolvedに遷移させるメソッド。

then()はresolvedな状態のときは第一引数の処理を実行。
rejectedの状態のときは第二引数の処理を実行する。

3.その他

・done()
done()は状態がresolvedになった場合に実行する

・fail()
fail()は状態がresolvedの場合に実行する

・always()
always()で指定した処理はresolved,rejected両方で実行される

これらのメソッドについては、次回の記事に実際に使ってみる。

4.参考

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)

Deferredについて丁寧に解説してくれる数少ない(?)本。
初心者向けではないけれど、中級者をビシビシしごいてくれるようなイメージの本。
「あとがき」が人間味溢れてて好きだ。