Zi 字媒體

[jQuery]Deferred Object – 佛祖球球

2021/12/25

在開發網頁時，常常會運用到一些非同步的功能，當功能執行完畢時，可能會呼叫某些函式。
例如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