【JavaScript 】jquery延迟对象

1、点击add按钮可以看到span元素添加并且颜色变红。然后在看代码中的的异类的东西，开始的var dfd = new $.Deferred();以及add事件函数中的dfd.resolve();还有就是最后面的dfd.done(function(){$("span").css("color","red");})。$.Deferred()就是今天介绍的重点---JQ中的延迟对象，所谓延迟就是在以后的某段事件可以运行。看上面的代码的一个处理流程，在上面的代码中我们调用新建的延迟对象的dfd.done()方法的参数位置传递了一个匿名函数表达式，在点击事件的处理函数执行时调用dfd.resolve()，之后我们写在dfd.done()里面的匿名函数就执行了，在这个过程中可以看做，dfd把done里面的函数放在resolve的位置了。dfd就是延迟对象，很明显它可以改变函数的执行顺序。在看上面的这段代码你仔细一想就会发现有个毛用啊，把改变颜色的代码放在一个函数里面，点击的时候调用这个函数不就好了，其实延迟对象最多的是应用在AJAX中。上面的代码点击add之后在点击remove然后在点击add这时候发现这次的字没有变成红色，这是因为延迟对象的状态变化之后就失效了，说白了就是一次性的。延迟对象使用JQ为实现了延迟对象的功能，一般称为Deferred或者Promise,基本上是一个东西，确切的说Promise是从Deferred中派生的一个子类。在使用的时候首先就是创建一个延迟对象：var dfd = new $.Deferred()。延迟对象dfd有三种状态分别为pending,resolved,rejected,可以通过对dfd对象使用state方法来查看此时的状态：dfd.state()。dfd在创建出来之后他的状态为pending,调用resolve方法之后：dfd.resolve()它的状态就会变为resolved然后会执行dfd.done()里面的函数，dfd调用reject方法之后：dfd.reject()它的状体就会变为rejected然后会执行dfd.fail()里面的方法，并且dfd对象在从pending变为resolved或者rejected之后就不会再发生任何变化，这也就是上面的代码为什么只能在第一次点击之后的文字是红的的原因。

3、在点击之后字体颜色变为绿色了。另外dfd还有另外一个函数always：dfd.always(),dfd的状态从pending变为哪个状态always里面的函数都会执行。dfd的每一个方法都会返回一个延迟对象，所以done,fail,always都是可以有多个的,可以直接写成链式调用：dfd.done(function(){}).done(function(){}).fail(function(){});dfd的无论哪个API都可以写多个，可能会考虑它的执行顺序能不能保证。这点完全可以放心，dfd的函数执行的顺序是完全没有问题的按照书写的顺序执行，看下面的代码：

5、可以在加多个.done(function(){})，每个done处理不同的事情这样看起来比较清晰。已经知道延迟对象可以改变代码的执行顺序，下面的代码：

7、allData是保存所有数据的一个集合，dataA是第一个AJAX返回的Promise对象，dataB是第二个。$.when()的done方法执行的唯一条件就是dataA和dataB都执行成功。dfd还有一对组合就是notify+progress当dfd对象的状态处于pending时可以调用dfd.nothfy(),调用之后dfd.progress()里面的函数会执行，只要dfd处于pending状态dfd.notify()就可以一直调用，同样也可以传递参数。