jQuery Deferredオブジェクトのサンプル

jQueryのDeferredオブジェクトのサンプルです。

Deferredオブジェクト

  • jQueryにある機能で、Deferredオブジェクトを生成して使用します。
  • resolveでDeferredオブジェクトの状態を解決済み(resolved)にします。
  • rejectでDeferredオブジェクトの状態を棄却済み(rejected)にします。
  • Deferredオブジェクトが解決済み(resolved)の場合、promiseオブジェクトのdoneで登録されていた関数が実行されます。
  • Deferredオブジェクトが棄却済み(rejected)の場合、promiseオブジェクトのfailで登録されていた関数が実行されます。
  • thenは、1つめの関数はdone,2つめの関数はfailになります。
  • 以下はjQueryのDeferredのリンクです。
    http://api.jquery.com/jQuery.Deferred/

コード

サンプルのコードです。
52行目のボタンを押すと、35行目のtest1()が実行され、
15行目の乱数の結果によって成功または失敗のメッセージが表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのDeferredのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

var test1 = function() { // 無名関数
	// 1. Deferredオブジェクトの生成
	var df = $.Deferred();

	// 2. 0〜1の乱数を発生させる 
	var rand = Math.random();
	var num = Math.floor(rand*2)// 0か1

	$("#p1").text("値は" + num + 'です'); // 0か1

	// 3. サンプルとして
	// 0の場合は解決済み(resolved)、
	// 1の場合は棄却済み(rejected)としている
	if(num==0){
		df.resolve(); // resolve(解決)
	}else if(num==1){
		df.reject(); // reject(却下)
	}
	$("#btn1").blur(); //フォーカスをはずす
	// 4. promiseオブジェクトを返しています
	return df.promise();
};

$(function() {
	$('#btn1').on('click', function() {

	var promise1 = test1();
	// 5. thenを使用。1つめの関数はdoneになる
	promise1.then(function() {
		$("#p2").text("成功しました"); //

	// 6. 2つめの関数はfailになる
	}, function() {
		$("#p2").text("失敗しました"); //
	});
  });
});
</script>
</head>
<body >

<p id="p1">何回かボタンを押して下さい</p>
<p id="p2">結果</p>
<input type="button" id="btn1" value="ボタン1">

</body>
</html>

サンプル

上記コードのサンプルです。 
乱数の結果によって成功または失敗のメッセージが表示されます。

何回かボタンを押して下さい

結果

関連の記事

jQuery $.ajaxで通信を行ってJSONを取得するサンプル
jQuery 属性値を取得/設定するサンプル(attr)
jQuery 表示を書き換えるサンプル(textとhtml)
jQuery ループ処理を行うサンプル(each)
jQuery 子孫要素を検索するサンプル(find)
jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)
jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)



△上に戻る