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函数执行完毕以后才会执行。

 

近来做了个关于动画的例子,所有的代码可在这里进行下载

posted @ 2012-12-31 18:53  moonreplace  阅读(642)  评论(0编辑  收藏  举报