Deferred对象混乱

Question

下面的代码片段按预期工作：

function boxAnimation() { 
     var dfd = $.Deferred(); 
     $('div').fadeIn('slow', dfd.resolve);    
     return dfd.promise(); 
    } 

    $(function() { 
     boxAnimation().done(
      function() { $(this).animate({ 'margin-top': 50 }); }, 
      function() { $(this).animate({ 'margin-left': 150 }); }, 
      function() { $(this).animate({ 'margin-top': 250 }); }, 
      function() { $(this).animate({ 'margin-left': 350 }); } 
     ).fail(function() { alert('failed'); }); 
    }); 

但是在这一个的递延对象既不拒绝或解决。

请告诉我，我该怎么错在何处。

function boxAnimation() { 
     var dfd = $.Deferred(); 
     var randomNum = Math.floor(Math.random() * 5); 
     $('div').fadeIn('slow', function() { 
      if (randomNum == 1) { 
       dfd.reject; 
      } 
      else { 
       dfd.resolve; 
      } 
     });    
     return dfd.promise(); 
    } 

    $(function() { 
     boxAnimation().done(
      function() { $(this).animate({ 'margin-top': 50 }); }, 
      function() { $(this).animate({ 'margin-left': 150 }); }, 
      function() { $(this).animate({ 'margin-top': 250 }); }, 
      function() { $(this).animate({ 'margin-left': 350 }); } 
     ).fail(function() { alert('failed'); }); 
    }); 

我的身体：

<div id='box' style='width:200px; height:200px; border:solid 1px #222222; display:none; background:#cccccc'></div> 

Answer 1

你应该调用函数;目前您正在访问它们并保持不变。通过实际调用reject/resolve，你真的拒绝/解决的事情。

在第一个例子中的fadeIn，你通过它没有()。这是正确的，因为你应该把它原封不动在这一点上。 jQuery将在动画完成时在内部调用该函数。

由于在第二个示例中调用已经在动画完成时执行的函数中，因此您应该在处调用。

if (randomNum == 1) { 
    dfd.reject();  // '()' calls a function 
} 
else { 
    dfd.resolve(); 
} 

---

其次，done处理机内，this是Deferred对象。 http://jsfiddle.net/PrmQR/1/：如果您想通过div，您可以通过拒绝时传递/解决这样做。

function boxAnimation() { 
    var dfd = $.Deferred(); 
    var randomNum = Math.floor(Math.random() * 5); 
    $('div').fadeIn('slow', function() { 
     if (randomNum == 1) { 
      dfd.reject(this); // pass div 
     } 
     else { 
      dfd.resolve(this); 
     } 
    });    
    return dfd.promise(); 
} 

$(function() { 
    boxAnimation().done(
     function (x) { $(x).animate({ 'margin-top': 50 }); },  // x is the div 
     function (x) { $(x).animate({ 'margin-left': 150 }); }, 
     function (x) { $(x).animate({ 'margin-top': 250 }); }, 
     function (x) { $(x).animate({ 'margin-left': 350 }); } 
    ).fail(function() { alert('failed'); }); 
});