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

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

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

Deferredオブジェクト

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

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

Deferredオブジェクトを使用したサンプルです。
ボタンを何回か押すと文字列が変わります。

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

結果

コード

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

3行目のボタンをクリックすると8行目から実行されます。
10行目は、21行目の関数を実行します。

25,26行目の結果(0か1)によって31行目のresolveまたは33行目のrejectを実行します。
12～17行目は、上記の結果がresolveのときは13行目、rejectのときは16行目が実行されます。

<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>
$(function(){
	$('#button1').on('click',function(){

	const promise1 = test1();

	promise1.then(function(){
		$("#p2").text("成功しました"); //

	},function(){
		$("#p2").text("失敗しました"); //
	});
  });
});

const test1 = function(){

	const df = $.Deferred();

	const rand = Math.random();
	const num = Math.floor(rand*2)// 0か1

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

	if(num===0){
		df.resolve(); //解決
	}else if(num==1){
		df.reject(); // 却下
	}
	$("#button1").blur(); //フォーカスをはずす

	return df.promise();
};
</script>

12行目は、test1関数の結果を受けて、resolveであれば13行目を実行します。
rejectであれば16行目を実行します。
21行目は、無名関数です。
23行目は、Deferredオブジェクトを生成しています。
25,26行目は、0または1を返します。
31行目は、サンプルとして値が0のときは解決済み(resolve)としています。
33行目は、サンプルとして値が1のときは却下(reject)としています。
37行目は、Deferredのpromiseオブジェクトを返します。