jQuery中deferred对象使用方法详解
来源: 阅读:711 次 日期:2016-07-27 15:08:00
温馨提示: 小编为您整理了“jQuery中deferred对象使用方法详解”,方便广大网友查阅!

在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的回调函数。同时,还改写了ajax方法,现在的ajax方法返回的是一个deferred对象。

那就来看看deferred对象的用法。

1.ajax的链式回调 

// ajax方法返回的是一个deferred对象,可以直接使用链式写法

$.ajax('test.json').done(function(resp){

 // done 相当于success回调,其中默认的参数为success回调的参数

 alert('success');

}).fail(function(){

 // fail 相当于error回调

 alert('error');

});

还可以同时写多个回调,会按照顺序依次执行 

$.ajax('test.json').done(function(resp){

 // done 相当于success回调,其中默认的参数为success回调的参数

 alert('success');

}).done(function(){

 // do something...

}).done(function(){

 // do something...

});

deferred对象还有一个then方法,其实它是一个整合done和fail的方法,它接受一到两个参数,如果有两个参数,那么第一个就是done方法的回调函数,第二个是fail方法的回调函数。如果只有一个参数,那就是done方法的回调函数。 

var success = function(){

 alert('success'); 

};

var error = function(){

 alert('error');

};

// 两个参数

$.ajax('test.json').then(success, error);

// 一个参数

$.ajax('test.json').then(success);

jQuery还提供了一个$.when(deferreds)的方法来执行一个或多个延迟对象的回调函数,当它的参数是延迟对象时,它会在所有延迟对象代表的异步执行完后再执行相应的回调函数 

$.when($.ajax('test.json'), $.ajax('demo.json')) .done(function(){

 alert('success'); 

}).fail(function(){

 alert('error');

});

很好理解,只有当所有异步都成功时,才会执行done方法中的回调,否则会执行fail方法中的回调,同样好理解的是的done方法中回调函数的默认参数数量则和when方法参数数量相同。

而如果when方法中传入的只是普通对象,不是deferred对象时,会立即执行done方法中的回调,回调函数的默认参数为传入when方法的对象本身。

// 当传入when方法的参数只是普通对象时

$.when({test: 'test'}).done(function(resp){

 console.log(resp.test); // 'test' 

}).fail(function(){

 // 由于传入的对象不是deferred对象,那么就不会调用fail中的回调了 

}) 

当你需要两个甚至更多的异步结束后才调用回调函数,同时这些异步ajax可能还需要修改传输方式type或者传数据data时,代码就显得很乱,可读性很差。 

所以就可以对ajax进行再次封装,提高代码可读性 

var ajax = function(url, type, param){

 return $.ajax({

 url: url,

 type: type,

 data: param || {} 

 }); 

};

ajax('test.json').done(function(resp){

 alert('success');

}).fail(function(){

 alert('error');

});

接者学习,漏了一个always()方法,参数也是回调函数,与done和fail不同的是,无论任何情况都执行always方法中的回调。

deferred对象不光可以用在jquery的ajax方法中,他提供了一系列的接口,使它的通用型大大提高。

比如有这样一个耗时比较久的方法

function a(){

 function b(){

 alert('start');

 } 

 setTimeout(b, 3000); 

如果要在这个方法之后执行某个回调,就不能用$.when()了,因为当$.when()的参数不为deferred对象是会直接调用done或者always中的回调函数。

这个时候就要使用deferred对象的其他方法了,还是上面的方法,做一些改写 

function a(){

 var def = $.Deferred(); // 创建deferred对象 

 function b(){

 alert('start');

 def.resolve(); // 改变deferred对象的状态

 } 

 setTimeout(b, 3000); 

 return def;

}

$.when(a()).done(function(){

 alert("It's callback");

});

分析一下:

 1). $.Deferred()方法会创建一个deferred对象

 2). def.resolve()会改变deferred对象的状态,deferred对象有三种状态,未完成,成功,失败。

 它有resolve()和reject()两个方法,resolve方法可以把对象状态改为成功,reject方法可以把状态改为失败。

 又有以上的写法会出现问题,返回的deferred对象可以被外部改变状态,所以还提供了一个promise()方法,这个方法会在deferred对象的基础上返回一个新的deferred对象,不同的是,返回的对象只存在可被观察到状态,而不具备可改变其状态的方法,类似返回了一个只读的deferred对象。

所以同样的例子可以改写成这样 

function a(){

 var def = $.Deferred(); // 创建deferred对象 

 function b(){

 alert('start');

 def.resolve(); // 改变deferred对象的状态

 } 

 setTimeout(b, 3000); 

 return def.promise();

}

$.when(a().reject()).done(function(){ // reject()方法无效

 alert("It's callback");

});

以上就是本文的全部内容,希望对大家的学习有所帮助

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map