Javascript 承诺和递延对象

我从这里的一个非常好的答案中得到了以下内容，将两个建议的方法缝合在一起，但我不知道如何使代码正常工作

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

---

如有任何帮助/建议，将不胜感激。关于这方面的一篇好的教程/文章也会非常有用，如果有人知道的话，我已经读了一些内容，但我正在努力想办法解决它。

你不想返回

$的结果。每个
，你都想返回你在循环中积累的
p
承诺。此外，它缺少结束括号：

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

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（）
来完成整个任务，但是数据结构和代码可能会变得非常笨拙

我同意
.reduce（）
模式不是这个星球上最容易阅读的模式，但它非常值得学习（就像我最近做的那样）。
实际描述这个问题会非常有帮助。什么是不起作用的？它应该如何起作用？您在哪里关闭
中的
。然后
p=p。然后
？var p=new$.Deferred（）.resolve（）有什么意义？为什么要创建一个延迟并立即解决它？为什么不创建一个延迟的文件，稍后再解决？或者更好的是，当您可以使用jQuery动画中的承诺时，为什么还要创建自己的承诺？@jfriend00以便获得一个空的已解决承诺，稍后用于排队操作。感谢您花时间解释这一点，我非常感谢。我可以肯定地看到这种方法的优点。我只是试着投票赞成，但不幸的是我没有代表。再次感谢，非常有用。大人物，StackOverflow中有一些不合理的地方。天知道你为什么需要代表才能投票。当你获得更多的分数后，你可以随时回来。