是否有一种更简单的方法可以为不同的选择器链接不同的jQuery操作然后嵌套$ .when？

Question

在jQuery中,您可以非常轻松地为同一个选择器链接操作,但如果您想为每个操作使用不同的选择器,则需要嵌套$.when多于两个操作,这很难阅读和维护.

HTML:

<span id='a'>Hello</span>
<span id='b'>world</span>
<span id='c'>!!!</span>

CSS:

span {
    display: none;
}

JS:基于此:如何隐藏多个项目,但只调用一次处理程序？

var d = 500; // duration

// Execute in parallel.
//$('#a').show(d).hide(d);
//$('#b').show(d).hide(d);
//$('#c').show(d).hide(d);


$.when($('#a').fadeIn(d).fadeOut(d)).done(function () {
    $.when($('#b').show(d).hide(d)).done(function () {
        $('#c').slideDown(d).slideUp(d);
    });
});

jsfiddle(旧)

的jsfiddle-2

我可以使用队列,但它似乎只适用于同一个选择器.

有没有办法以更易于维护的方式编写它,如:

伪代码

var myActions = [];
myActions.push(function(){...});
myActions.push(function(){...});
myActions.push(function(){...});
something.executeSequentially(myActions);

编辑:

我更新了演示,以便更难一点.

Answer 1

如果你真的不必遇到失败（我想这对于动画来说几乎是不可能的），你可以使用以下方法（感谢@Esailija，因为这个解决方案基本上是他的答案的简化版本）：

var chainOfActions = [
    function() { return $('#a').fadeIn(d).fadeOut(d); },
    function() { return $('#b').fadeIn(d).fadeOut(d); },
    function() { return $('#c').fadeIn(d).fadeOut(d); },
];
chainOfActions.reduce(function(curr, next) {
    return curr.then(next);
}, $().promise());

演示。这里有三个关键点：

• 动作链中的每个函数都已经返回一个承诺（如果没有，您可以通过返回调用结果.promise()来“承诺”它）
• reduce在创建链的每个步骤时，提供的每个回调都会then()创建一个新的承诺
• 整个链是通过提供一个空的承诺作为reduce累加器的初始值来启动的。