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

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();
});