详解jQuery中的deferred对象的使用（一）

225 阅读 0 评论 149 点赞

我是靠谱客的博主细腻冷风，最近开发中收集的这篇文章主要介绍详解jQuery中的deferred对象的使用（一），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

deferred对象是jQuery对Promises接口的实现。它是非同步操作的通用接口，可以被看作是一个等待完成的任务，开发者通过一些通过的接口对其进行设置。事实上，它扮演代理人（proxy）的角色，将那些非同步操作包装成具有某些统一特性的对象，典型例子就是Ajax操作、网页动画、web worker等等。

jQuery的所有Ajax操作函数，默认返回的就是一个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');
});

以上所述是小编给大家介绍的jQuery中的deferred对象的使用（一）的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！