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

Question

在 jQuery 中你可以 chain同一个选择器的 Action 很容易，但是如果你想为每个 Action 使用不同的选择器，它需要嵌套的 $.when 和两个以上的 Action ，这很难阅读和维护。

HTML:

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

CSS:

span {
    display: none;
}

JS:基于此:how to hide multiple items but only call the handler once?

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

我想我可以使用 queue但它似乎只适用于同一个选择器。

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

伪代码

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

编辑:

我更新了演示，让它更难一些。

Answer 1

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

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

Demo .这里有三个关键点:

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