jQuery通过deferred对象管理ajax异步

今天跟大家分享一个jquery中的对象-deferred。其实从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。不过可能在实际开发过程中用到的并不多，所以没有太在意。

什么是deferred对象？

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。

这里先不说deferred的概念，我们先看一个例子。

还记得初学的时候，遇到一个实例，先是要ajax请求一个接口（a.json），从返回的数据中获得一个id1值。然后再请求一个接口（b.json）获得id2，最后需要对这两个id值同时进行操作。

错误解法

那个时候初学，首先想到的方案（现在想想，很傻很天真...）

var id1, id2;$.ajax({url: 'a.js',dataType: 'json',type: 'get',success: function(d){id1 = d.item.id;}});$.ajax({url: 'b.js',dataType: 'json',type: 'get',success: function(d){id2 = d.item.id;}})alert('id1='+id1+','+ 'id2='+ id2); 

因为那个时候，还没有理解异步的概念，所以以为，第二次ajax的时候id已经有值了，但是运行之后才发现，变量id其实根本没被赋值。想要测试上面代码，点这里

也就是这一刻，我真正明白了:ajax是异步的！！！。

傻瓜式解法

发现上面那个方法不能用之后，分析了一下，弹出undefined是因为弹出之前id还没有被赋值，那我保证在弹出之前给id赋值不就解决了吗？好的，于是我想到了下面这个方法：

var id1; $.ajax({url: '/test/json/a.js',dataType: 'json',type: 'get',success: function(d){id1 = d.item.id;$.ajax({url: '/test/json/b.js',dataType: 'json',type: 'get',success: function(f){id2 = f.item.id;alert('id1='+id1+','+ 'id2='+ id2);}});}}) 

逻辑虽然正确了，但总觉得怪怪的，如果这里需要嵌套3层呢？4层呢？。。。ajax里面嵌套ajax，如果数据很多，访问速度慢，嵌套更多层，会导致性能下降、影响用户体验、代码不好维护等等问题。所以一般不推荐这种方法。总之，这种写法让我难以接受。

所以思来想去，觉得不妥。。。然后那个时候就在一个前端群里，询问各种大牛，直到一个大牛告诉我让我百度一下deferred，后来认真学习了下，觉得不错。