javascript - 除非前一个完成，否则如何使动画不触发(不使用回调)

Question

我有一个名为:

的函数

this.makeStuffHappen() 

它根据 switch 语句和几个变量制作不同的动画。除非所有先前的问题都已解决，否则是否可以使函数不触发。

我想写一些类似的东西

$('button').click(function(){
    a.makeStuffHappen();
    b.makeStuffHappen();
    c.makeStuffHappen();
    d.makeStuffHappen();
});

然后它应该只在a完成后运行b，b完成后运行c，c完成后运行d。是否只能通过链接动画来等待前一个动画？是否可以链接任何功能？

编辑:makeStuffHappen() 正在为不同的元素设置动画，因此 a.makeStuffHappen() 将为与 b.makeStuffHappen 不同的元素设置动画，依此类推。

谢谢。

Answer 1

最简单(或至少最灵活)的方法是使用 deferred objects ^[docs] 。为此，您必须从每个函数返回一个延迟对象，例如:

a.makeStuffHappen = function() {
    elementA.animate(...);
    elementB.animate(...);
    ...


    return $.when(elementA, elementB,...);
};

与b.makeStuffHappen等相同

$.when() ^[docs]返回一个延迟对象，您可以在其中附加回调，一旦传递给它的所有延迟对象都得到解析，就会执行该回调。

然后在您的事件处理程序中，您可以调用 .pipe() ^[docs]在这些延迟对象上，将它们链接在一起:

$('button').click(function(){
    a.makeStuffHappen()
       .pipe($.proxy(b.makeStuffHappen, b))
       .pipe($.proxy(c.makeStuffHappen, c))
       .then(function() {
           console.log('All done');
       });
});

DEMO