原文：hhtps://www.cnblogs.com/shijingjing07/p/6403450.html
----------------------------------------------------------------------------------
1.什么是deferred對象
deferred對象是一個延遲對象，意思是函數延遲到某個點才開始執行，改變執行狀態的方法有兩個（成功：resolve和失敗：reject），分別對應兩種執行回調（成功回調函數：done和失敗回調函數fail）
2.deferred對象使用示例
ajax方式其實是deferred對象
1)普通的ajax操作
$.ajax({
url: "index.html",
success: function () {
alert("success");
},
error: function () {
alert("error");
}
});
success,error函數在請求url響應后才開始執行
2)1.5版本后新的寫法
$.ajax("index.html")
.done(function () { alert("success"); })
.fail(function () { alert("error"); })
.done(function () { alert("success2");});
新的寫法可以自由添加多個回調函數，按添加的順序執行。
3)為多個ajax執行回調函數
$.when($.ajax("index.html"), $.ajax("addorder2.html"))
.done(function () { alert("success"); })
.fail(function () { alert("error");})
只有兩個ajax都請求成功，才會執行done函數
4)為普通方法指定回調函數
var wait=function(){
var tasks=function(){
alert("執行完畢！");
};
setTimeout(tasks,5000);
};
$.when(wait())
.done(function(){alert("success");})
.fail(function(){alert("error")});
wait不是一個deferred對象，運行后沒有等待wait()函數執行結果，先執行回調函數了。
加入deferred對象，代碼示例如下：
var dtd=$.Deferred();
var wait=function(dtd){
var tasks=function(){
alert("執行完畢！");
dtd.resolve();
};
setTimeout(tasks,5000);
return dtd;
};
$.when(wait(dtd))
.done(function(){alert("success");})
.fail(function(){alert("error")});
其中$.when()中的參數必須是個deferred對象，
dtd.resolve();改變執行狀態為成功，調用done回調函數。
dtd.reject();改變執行狀態為失敗，調用fail回調函數。
5)deferred對象的promise()方法
上例中，定義了一個全局的deferred對象，在deferred對象wait外部也可以調用改變執行狀態函數。
deferred對象調用promise()方法后，就只能執行回調函數(done,fail)了，不能執行狀態改變函數(resolve,reject)
代碼示例如下：
var wait=function(){
var dtd=$.Deferred();
var tasks=function(){
alert("執行完畢！");
dtd.resolve();
};
setTimeout(tasks,5000);
return dtd.promise();
};
var d=wait();
d.resolve();//執行執行狀態改變函數resolve不起任何作用！
$.when(d)
.done(function(){alert("success");})
.fail(function(){alert("error")});
-------------------------------------------------------------------------------------------
Examples:
Since the jQuery.get method returns a jqXHR object, which is derived from a Deferred object, we can attach handlers using the .then method.
|
1
2
3
4
5
6
7
|
$.get( "test.php" ).then(
function() {
alert( "$.get succeeded" );
}, function() {
alert( "$.get failed!" );
}
);
|
Filter the resolve value:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>deferred.then demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Filter Resolve</button>
<p></p>
<script>
var filterResolve = function() {
var defer = $.Deferred(),
filtered = defer.then(function( value ) {
return value * 2;
});
defer.resolve( 5 );
filtered.done(function( value ) {
$( "p" ).html( "Value is ( 2*5 = ) 10: " + value );
});
};
$( "button" ).on( "click", filterResolve );
</script>
</body>
</html>
|
Demo:
Filter reject value:
|
1
2
3
4
5
6
7
8
9
|
var defer = $.Deferred(),
filtered = defer.then( null, function( value ) {
return value * 3;
});
defer.reject( 6 );
filtered.fail(function( value ) {
alert( "Value is ( 3*6 = ) 18: " + value );
});
|
Chain tasks:
|
1
2
3
4
5
6
7
8
|
var request = $.ajax( url, { dataType: "json" } ),
chained = request.then(function( data ) {
return $.ajax( url2, { data: { user: data.userId } } );
});
chained.done(function( data ) {
// data retrieved from url2 as provided by the first request
});
|