jQuery Deferred, Promise如何用及一个动画例子
jQuery从1.5开始引入了一个新的对象，Deferred(), 在官方的说明文档中是这样介绍它的，它是一个可链式操作的工具对象，我们可以用它来注册多个回调函数到一个回调函数队列中，我们可以同步也可以异步的依据它的success或者failure状态来调用这个队列。
jQuery Deferred对象有很多方法，我们一般常用的仅仅是then(), done(), fail(),那让我们来看一下如何用:
1.一个非常简单的同步执行的例子
View Code
1 (function($){ 2 var defer = jQuery.Deferred();//Declaire one deferred object 3 //created on array which is used to store the call back functions 4 var callbacks =[]; 5 callbacks.push(function(){console.log(1);}); 6 callbacks.push(function(){console.log(2);}); 7 //Add all callbacks to done callbacks queue 8 defer.done.apply(this, callbacks); 9 //Invoke the done callbacks 10 defer.resolve(); 11 12 })(jQuery);
2. 让我们来看一个异步执行的例子
View Code
(function($){ var defer = jQuery.Deferred();//Declaire one deferred object //created on array which is used to store the call back functions var callbacks =[]; callbacks.push(function(){console.log(1);}); callbacks.push(function(){console.log(2);}); //Add all callbacks to done callbacks queue defer.done.apply(this, callbacks); setTimeout(function(){ //Invoke the done callbacks defer.resolve(); }, 2000)//delay 2s to execute this function })(jQuery);
3. 再让我们看一个then() 是如何用的例子：
View Code
(function($){ var defer = jQuery.Deferred();//Declaire one deferred object //created on array which is used to store the call back functions var callbacks =[]; callbacks.push(function(){console.log(1);}); callbacks.push(function(){console.log(2);}); //Add all callbacks to done callbacks queue defer.done.apply(this, callbacks); setTimeout(function(){ //Invoke the done callbacks defer.resolve(); }, 2000)//delay 2s to execute this function defer.promise().then(function(){ console.log(3); }).then(function(){ console.log(4); }); })(jQuery);
4. 再来看一个fail()的例子：
View Code
(function($){ var defer = jQuery.Deferred();//Declaire one deferred object //created on array which is used to store the call back functions var callbacks =[]; callbacks.push(function(){console.log(1);}); callbacks.push(function(){console.log(2);}); //Add all callbacks to done callbacks queue defer.done.apply(this, callbacks); var failCallback = function(){ console.log("You are failure"); }; defer.fail(failCallback); setTimeout(function(){ //Invoke the fail callbacks defer.reject(); }, 2000)//delay 2s to execute this function defer.promise().then(function(){ console.log(3); }).then(function(){ console.log(4); }); })(jQuery);
请注意在上面的fail()的例子中，当它执行完毕后，它不会执行then()中的函数。
就上面这几段代码来让我们看下如何用deferred:
1. 先声明一个deferred对象 var defer = new Deferred();
2. 我们把这个deferred对象中所需要的成功执行的函数和fail所执行的函数加入到相应的对队中。
3. 根据相应的情况，我们可以分别触发， defer.resolve(), defer.reject(),它就会自动执行的相应队列中的函数。
promise
.promise([type][,target]),官方文档是这样定义的，当我们调用这个函数的时候，它会返回一个promise对象，这个对象会监控绑定到type上的一个函数，或者是一个函数集合或者是一个函数队列，是否已经执行完毕。而默认的type是fx，也就是我们用jquery中的animate，或者是其他的动画函数。
让我们来看一个例子:
View Code
<!DOCTYPE html> <html> <head> <style> div { height: 50px; width: 50px; float: left; margin-right: 10px; display: none; background-color: #090; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button>Go</button> <p>Ready...</p> <div></div> <div></div> <div></div> <div></div> <script> $("button").bind( "click", function() { $("p").append( "Started..."); $("div").each(function( i ) { $( this ).fadeIn().fadeOut( 1000 * (i+1) ); }); $( "div" ).promise().done(function() { $( "p" ).append( " Finished! " ); }); }); </script> </body> </html>
我们可以看到，直到动画结束后才加入相应的状态。
让我们来看一下，deferred对象如何来应用promise(),上个例子先
View Code
(function($){ var defer = jQuery.Deferred();//Declaire one deferred object //created on array which is used to store the call back functions var callbacks =[]; callbacks.push(function(){console.log(1);}); callbacks.push(function(){console.log(2);}); //Add all callbacks to done callbacks queue defer.done.apply(this, callbacks); var failCallback = function(){ console.log("You are failure"); }; setTimeout(function(){ //Invoke the fail callbacks defer.resolve(); }, 2000)//delay 2s to execute this function defer.promise().then(function(){ console.log(3); }).then(function(){ console.log(4); }); })(jQuery);
我们可以看到只有当所有的done函数执行完毕以后才会执行。
近来做了个关于动画的例子，所有的代码可在这里进行下载 。