您的位置:首页 > Web前端 > JQuery

jQuery的deferred对象实现callback

2015-11-03 10:21 751 查看
jQuery的deferred对象可以使其普通的操作也可执行回调函数

//传统的ajax操作
$.ajax({
url : 'test.html',
success : function(){
alert('成功');
},
error : function(){
alert('失败');
}
})

//使用deferred对象,可以进行链式操作
//done相当于success,fail相当于error
$.ajax('test.html')
.done(function(){alert('成功');})
.fail(function(){alert('失败');})
//可以添加多个回调函数
.done(function(){alert('第二个回调函数');});

//使用$.when为多个事件指定同一个回调函数
$.when($.ajax('test1.html'),$.ajax('test2.html'))
.done(function(){alert('成功');})
.fail(function(){alert('失败');});
//这段代码的意思是执行两个ajax,如果都成功,执行done回调函数,如果都失败或者有一个失败,则执行fail回调函数

//普通操作的回调函数
var dtd = $.Deferred(); //新建一个deferred对象
var wait = function(dtd){
var tasks = function(){
alert('执行完毕');
dtd.resolve(); //改变deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd;
}
$.when(wait(dtd))
.done(function(){alert('成功');})
.fail(function(){alert('失败');});
//注意:不可以直接$.when(wait()),$.when的参数必须是deferred对象
//deferred对象有三种执行状态:未完成、已完成、已失败
//未完成:调用progress()方法指定回调函数
//已完成:deferred.resolve()
//已失败:deferred.reject()

//上面这种写法导致了dtd是一个全局对象,可以任意改变它,jQuery提供了一个deferred.promise()方法来避免这种情况
var dtd = $.Deferred();
var wait = function(dtd){
var tasks = function(){
alert('执行完毕');
dtd.resolve();
};
setTimeout(tasks,5000);
return dtd.promise(); //返回promise对象
}
var d = wait(dtd);
$.when(d)
.done(function(){alert('成功');})
.fail(function(){alert('失败');});
d.resolve(); //无效

//更好的写法是在函数内部声明deferred对象
var wait = function(dtd){
var dtd = $.Deferred();
var tasks = function(){
alert('执行完毕');
dtd.resolve();
};
setTimeout(tasks,5000);
return dtd.promise(); //返回promise对象
}
$.when(wait())
.done(function(){alert('成功');})
.fail(function(){alert('失败');});

//直接使用$.Deferred()
$.Deferred(wait)
.done(function(){alert('成功');})
.fail(function(){alert('失败');});
//$.Deferred()可以接受一个函数名作为参数,所生成的deferred对象将作为这个函数的默认参数

//deferred.then()可以把成功和失败的回调函数写在一起
$.when($.ajax('main.php'))
.then(successFunc,failureFunc);

//deferred.always()表示不管成功失败都会调用
$.when($.ajax('main.php'))
.always(function(){alert('已执行');});http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: