在開發網頁時,常常會運用到一些非同步的功能,當功能執行完畢時,可能會呼叫某些函式。
例如Ajax就是大家比較常用到的,但是jQuery在Ajax的使用方面較為複雜(巢狀的結構),例如:

$.ajax({
	url : "test.php",
	success: function(msg){
		alert(msg + " Tom");
	}
});

因此jQuery設計了Deferred Object方便這方面的操作

Deferred Object建立

var deferred = $.Deferred();

//也可以建立帶參數的Deferred
var deferred = $.Deferred(function(deferred){
	alert("Hello");
});

Deferred Object狀態
Deferred Object有三種狀態

  • Pending:Operation 處理中
  • Resolve:Operation 處理成功
  • Reject:Operation 處理失敗

可以利用Deferred.state()查看現在狀態

//Pending
alert(deferred.state());

//Resolve
deferred.resolve();
alert(deferred.state());

//這裡得到的狀態還是Resolve,因為Deferred已經是處理完成狀態了,無法換成處理失敗狀態
deferred.reject();
alert(deferred.state());

Deferred Object使用方法

var deferred = $.ajax("test.php");

//當Ajax時動作完成時,可以同時執行多個動作
deferred.done(function(msg){
	alert(msg + " Tom");
});

deferred.done(function(msg){
	alert(msg + " John");
});

Deferred Object $.when()

//$.when的意思是,如果兩個ajax都成功,就會執行done,只要其中一個失敗,就會執行fail
//$.when的參數只接受Deferred物件
var deferred = $.when($.ajax("test.php"), $.ajax("test2.php"));

deferred.done(function(){
	alert("成功");
});

deferred.fail(function(){
	alert("失敗");
});

Deferred Object $.when() 陣列

//配合apply使用,當陣列的deferred物件都callback後才執行alert
$.when.apply(null,[$.getJSON("URL"),$.getJSON("URL"),$.getJSON("URL")]).then(function(){
	alert("done");
});
Categories: jQuery