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/

Deferredオブジェクトを使用したサンプル

Deferredオブジェクトを使用したサンプルです。 
乱数の結果によってDeferredオブジェクトのresolveとrejectに振り分けpromiseオブジェクトのdoneまたはfailを実行しメッセージが表示しています。

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

結果

コード

上記コードのサンプルです。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

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

	// 2. 0〜1の乱数を発生させる 
	const rand = Math.random();
	const 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(却下)
	}
	$("#button1").blur(); //フォーカスをはずす
	// 4. promiseオブジェクトを返しています
	return df.promise();
};

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

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

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

3行目のボタンを押すと、32行目から実行されます。
13,14行目の乱数の結果によって成功または失敗のメッセージが表示されます。

関連の記事

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

△上に戻る