承諾和延期的對象

Question

我有以下幾點，我從這裏的一個非常好的答案中，將兩個建議的方法拼接在一起，但我看不到如何讓代碼正常工作。

var animals = ['mouse', 'newt', 'shrew', 'grasshopper', 'frog', 'hedgehog']; 

$('#s1text1').delay(dur).fadeOut(dur).promise() 
.then(function() { 
    return $('#s1text2').fadeIn(dur).promise(); 
}) 
.then(function() { 
    var p = new $.Deferred().resolve(); 
    return $.each(animals, function(i, animal) { 
     p = p.then(function() { 
      return $('.' + animal).fadeIn(defaultDur, function() { 
       animateAnimalGroup(animal); 
      }).promise(); 
     }); 
    }) 
    .then(function() { 
     return $('#s1text2').fadeOut(dur).promise(); 
    }) 
    .then(function() { 
     return $('#s1text3').fadeIn(dur).promise(); 
    }) 
    .then(function() { 
     return $('#s1text4').fadeIn(dur).promise(); 
    }); 

任何幫助/建議將不勝感激。如果有人知道其中的一篇，一篇好的教程/關於此的文章將會非常有用，我已經閱讀了一些內容，但是正在努力想方設法解決它。

Answer 1

你不想返回$.each的結果，你想返回你在循環中積累的p承諾。此外，它缺少右括號：

.then(function() { 
    var p = new $.Deferred().resolve(); 
    $.each(animals, function(i, animal) { 
     p = p.then(function() { 
      … 
     }); 
    }) 
    return p; 
}) 
.then(…) 

Answer 2

Bigwigal，你可能有興趣在涉及array.reduce()，建立你.then()鏈，而無需顯式的循環或明確分配/生成承諾的重新分配的另一種方法。

//Data 
var animals = ['mouse', 'newt', 'shrew', 'grasshopper', 'frog', 'hedgehog'], 
    fades1 = [ 
     {id:'s1text1', delay:dur, action:'fadeOut'}, 
     {id:'s1text2', delay:0, action:'fadeIn'} 
    ], 
    fades2 = [ 
     {id:'s1text2', delay:0, action:'fadeOut'}, 
     {id:'s1text3', delay:0, action:'fadeIn'}, 
     {id:'s1text4', delay:0, action:'fadeIn'} 
    ]; 

//Phase 1 (initial fades) 
fades1.reduce(function(promise, item) { 
    return promise.then(function() { 
     return $('#' + item.id).delay(item.delay)[item.action](dur).promise(); 
    }); 
}, $.when()).then(function() { 
    //Phase 2 (animal fades) 
    return animals.reduce(function(promise, animal) { 
     return promise.then(function() { 
      return $('.' + animal).fadeIn(defaultDur).promise().then(function() { 
       return animateAnimalGroup(animal);//you probably want a return here but not necessarily, depending on the visual effect you want. 
      }); 
     }); 
    }, $.when()); 
}).then(function() { 
    //Phase 3 (final fades) 
    return fades2.reduce(function(promise, item) { 
     return promise.then(function() { 
      return $('#' + item.id).delay(item.delay)[item.action](dur).promise(); 
     }); 
    }, $.when()); 
}); 

你現在已經是一個硬編碼，廣義三相動畫圖案，細節其中的數據驅動。要更改詳細信息，只需修改陣列，即animals,fades1和fades2。

這種方法可能很有用，而不是最終的結果，但在開發過程中，您可能會在滿意之前改變主意十幾次。

你可能會走得更遠，用一個數組和一個數組來完成整個事情，但是數據結構和代碼可能會變得笨拙。

我同意.reduce()模式並不是這個星球上最可讀的模式，但是經歷學習它的痛苦障礙是非常值得的（正如我最近所做的那樣）。