jquery的defer

Posted 2020-10-20 Carina

deferred.promise() 和 .promise()

这两个API语法几乎一样，但是有着很大的差别。deferred.promise()是Deferred实例的一个方法，他返回一个Deferred.Promise实例。一个Deferred.Promise对象可以理解为是deferred对象的一个视图，它只包含deferred对象的一组方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(),这些方法只能观察一个deferred的状态，而无法更改deferred对象的内在状态。这非常适合于API的封装。例如一个deferred对象的持有者可以根据自己的需要控制deferred状态的状态（resolved或者rejected），但是可以把这个deferred对象的Promise对象返回给其它的观察者，观察者只能观察状态的变化绑定相应的回调函数，但是无法更改deferred对象的内在状态，从而起到很好的隔离保护作用。

 1 $(function(){ 
 2   // 
 3   var deferred = $.Deferred(); 
 4   var promise = deferred.promise(); 
 5     
 6   var doSomething = function(promise) { 
 7     promise.done(function(){ 
 8       alert(‘deferred resolved.‘); 
 9     }); 
10   }; 
11     
12   deferred.resolve(); 
13   doSomething(promise); 
14 }) 

deferred.promise()也可以接受一个object参数，此时传入的object将被赋予Promise的方法，并作为结果返回。

 1 // Existing object 
 2 var obj = { 
 3  hello: function( name ) { 
 4   alert( "Hello " + name ); 
 5  } 
 6 }, 
 7 // Create a Deferred 
 8 defer = $.Deferred(); 
 9   
10 // Set object as a promise 
11 defer.promise( obj ); 
12   
13 // Resolve the deferred 
14 defer.resolve( "John" ); 
15   
16 // Use the object as a Promise 
17 obj.done(function( name ) { 
18  this.hello( name ); // will alert "Hello John" 
19 }).hello( "Karl" ); // will alert "Hello Karl" 

deferred.promise() 只是阻止其他代码来改变这个 deferred 对象的状态。可以理解成，通过 deferred.promise() 方法返回的 deferred promise 对象，是没有 resolve ,reject, progress , resolveWith, rejectWith , progressWith 这些可以改变状态的方法，你只能使用 done, then ,fail 等方法添加 handler 或者判断状态。

deferred.promise() 改变不了 deferred 对象的状态，作用也不是保证目前的状态不变，它只是保证你不能通过 deferred.promise() 返回的 deferred promise 对象改变 deferred 对象的状态。如果我们这个地方直接返回 dtd，也是可以工作的，.done 的处理函数还是会等到 dtd.resolve() 之后才会执行.

具体在那篇博客的例子, 如果我们把代码改成如下的形式：

 1 var dtd = $.Deferred(); // 新建一个deferred对象
 2 var wait = function(dtd){
 3   var tasks = function(){
 4     alert("执行完毕！");
 5     dtd.resolve(); // 改变deferred对象的执行状态
 6   };
 7   setTimeout(tasks,5000);
 8   return dtd;
 9 };
10 $.when(wait(dtd))
11 .done(function(){ alert("哈哈，成功了！"); })
12 .fail(function(){ alert("出错啦！"); });