jquery的deferred使用详解

原文:hhtps://www.cnblogs.com/shijingjing07/p/6403450.html

----------------------------------------------------------------------------------

1.什么是deferred对象
deferred对象是一个延迟对象,意思是函数延迟到某个点才开始执行,改变执行状态的方法有两个(成功:resolve和失败:reject),分别对应两种执行回调(成功回调函数:done和失败回调函数fail)

2.deferred对象使用示例
ajax方式其实是deferred对象
1)普通的ajax操作

jquery的deferred使用详解
$.ajax({
url: "index.html",
success: function () {
alert("success");
},
error: function () {
alert("error");
}
});
jquery的deferred使用详解

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)为普通方法指定回调函数

jquery的deferred使用详解
var wait=function(){
var tasks=function(){
alert("执行完毕!");
};
setTimeout(tasks,5000);
};
$.when(wait())
.done(function(){alert("success");})
.fail(function(){alert("error")});
jquery的deferred使用详解

wait不是一个deferred对象,运行后没有等待wait()函数执行结果,先执行回调函数了。

加入deferred对象,代码示例如下:

jquery的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")});
jquery的deferred使用详解

其中$.when()中的参数必须是个deferred对象,
dtd.resolve();改变执行状态为成功,调用done回调函数。
dtd.reject();改变执行状态为失败,调用fail回调函数。
5)deferred对象的promise()方法
上例中,定义了一个全局的deferred对象,在deferred对象wait外部也可以调用改变执行状态函数。
deferred对象调用promise()方法后,就只能执行回调函数(done,fail)了,不能执行状态改变函数(resolve,reject)
代码示例如下:

jquery的deferred使用详解
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")});
jquery的deferred使用详解  

-------------------------------------------------------------------------------------------

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 });
上一篇:python – 正确使用客户端并延迟使用Twisted


下一篇:unity渲染路径