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

jQueryの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オブジェクトを使用するサンプルです。 
ボタンを押すとコンソールに文字の1か2が表示されます。

<p>ボタンを押して下さい</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(){
		console.log("1"); //

	},function(){
		console.log("2"); //
	});
  });
});
const test1 = function(){

	const df = $.Deferred();

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

	if(num === 0){
		df.resolve(); //解決
	}else if(num === 1){
		df.reject(); // 却下
	}

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

2行目のボタンをクリックすると9行目から実行されます。

9行目は、19行目の無名関数を実行します。
21行目は、Deferredオブジェクトを生成しています。

23行目はランダムで0か1を返します。
その値によって26行目のresolve(解決済み)または28行目のreject(却下)を実行します。

11行目は、test1関数の結果を受けて、resolveであれば12行目を実行し、
rejectであれば15行目を実行します。
31行目は、Deferredのpromiseオブジェクトを返します。

関連の記事

jQuery $.ajaxで通信を行ってJSONを取得するサンプル
jQuery 属性値を取得/設定/削除する(attr/removeAttr)
jQuery textメソッドとhtmlメソッドの違いのサンプル
Query 繰り返し処理を行うサンプル(each)

△上に戻る