jQuery的deferred对象详解-前端进阶之旅

转载于互联网

# 一、什么是deferred对象？

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。
通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。
但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。
简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。
它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。它的主要功能，可以归结为四点

首先，回顾一下jQuery的ajax操作的传统写法：

$.ajax({

　　　　url: "test.html",

　　　　success: function(){
　　　　　　alert("哈哈，成功了！");
　　　　},

　　　　error:function(){
　　　　　　alert("出错啦！");
　　　　}

　});

@前端进阶之旅: 代码已经复制到剪贴板

在上面的代码中，$.ajax()接受一个对象参数，这个对象包含两个方法：success方法指定操作成功后的回调函数，error方法指定操作失败后的回调函数。
$.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作；如果高于1.5.0版本，返回的是deferred对象，可以进行链式操作。
现在，新的写法是这样的：

$.ajax("test.html")

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

@前端进阶之旅: 代码已经复制到剪贴板

可以看到，done()相当于success方法，fail()相当于error方法。采用链式写法以后，代码的可读性大大提高

　　$.ajax("test.html")

　　.done(function(){ alert("哈哈，成功了！");} )

　　.fail(function(){ alert("出错啦！"); } )

　　.done(function(){ alert("第二个回调函数！");} );