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

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

Deferredのdone(), fail(), always()

スポンサーリンク

1.基礎

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

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

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

・resolveWith(), rejectWith()
第一引数に後続関数内でthisが参照するオブジェクトを指定、第二引数にはそのまま後続関数に渡される引数の配列を指定する。

2.サンプル

サンプルを見てみよう。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル</title>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
	var reso = function() {
		var d = $.Deferred();
		setTimeout(function() {
			d.resolve('arg 1(resolve)', 'arg2(resolve)');
		},500);
		return d.promise();
	}

	var rej = function () {
		var d = $.Deferred();
		setTimeout(function() {
			d.rejectWith({
				display: function () {
					alert("thisが参照するオブジェクト");
				}
			},['普通の','引数','ですよ']);
		},1000);
		return d.promise();
	}

	reso().done(function (arg1,arg2) {
		console.log('%s %s',arg1,arg2);
	})

	rej().fail(function(arg1, arg2) {
		//上の第一引数はthisが参照する
		this.display();
		console.log('普通の引数は→' + arg1 + ',' + arg2);
	});
});
</script>
</head>
<body>
<h1>Deferredの基礎</h1>

</body>
</html>

以下にデモを示すが、done()がresolvedの状態のときに実行されて、fail()がrejectedの状態のときに実行される。
そして、rejectedWithでは、オブジェクトを渡してthisで参照できる。

3.デモ

f:id:sho322:20140119175243j:plain
resolvedになったときに、doneが実行された。
f:id:sho322:20140119175253j:plain
ちゃんとオブジェクトが渡せている。

4.参考

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

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

名著「パーフェクトJavaScript」の12章が大いに参考になった。
Deferredについて書かれている本は少ないけれど、さすがパーフェクトJavaScriptだと思った。