jquery的deferred使用详解

原文：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.

$.get( "test.php" ).then(

function() {

alert( "$.get succeeded" );

}, function() {

alert( "$.get failed!" );

}

);

Filter the resolve value:

<!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:

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:

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

});