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'); }); 
});