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

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

HTML：

 Hello world !!! 

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（如果没有，你可以通过返回.promise()调用的结果来’promisify’）
• 在reduce的每一步创建一个链，因为提供给then()每个回调都会创建一个新的promise
• 通过提供一个空的promise作为reduce accumulator的初始值来启动整个链。

Answer 2

编辑，更新

 var d = 500 , something = {} , myActions = []; myActions.push( function (next) { $('#a').fadeIn(d).fadeOut(d, next) }); myActions.push( function (next) { return $('#b').show(d).hide(d, next) }); myActions.push( function () { return $('#c').slideDown(d).slideUp(d) }); something.executeSequentially = function (arr) { return $(this).queue("fx", arr); }; something.executeSequentially(myActions); 

jsfiddle http://jsfiddle.net/guest271314/2oawa1zn/