承诺和延期的对象

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()模式并不是这个星球上最可读的模式，但是经历学习它的痛苦障碍是非常值得的（正如我最近所做的那样）。