标签：jquery function alert deferred ajax 详解 done var
原文：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
});
|
标签：jquery,function,alert,deferred,ajax,详解,done,var 来源： https://www.cnblogs.com/oxspirt/p/10766427.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。