Question

我有一个叫做的函数：

this.makeStuffHappen()

根据switch语句和几个变量制作不同的动画。除非之前的所有功能都已解决，否则是否可以使功能不起火。

我想写点像

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

然后它应该只在完成后运行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

Answer 2

看一下jquery的队列函数： http://api.jquery.com/queue

Answer 3

回调是最简单的方法，但是因为你不想使用回调（jQuery的.queue()确实需要 - 好吧......反正的递归回调），你可以让你拥有的方法返回布尔：

$('button').click(function()
{
    var theObjects = [a,b,c,d];
    for (var i=0;i<theObjects.length;i++)
    {
        if (theObjects[i].makeStuffHappen() === false)
        {
            break;//or throw, or whatever...
        }
    }
});

当然，根据调用的对象，方法很可能会有所不同。您可以通过使用对象而不是数组来解决此问题，在这种情况下，您的事件处理程序可能类似于：

$('button').click(function()
{
    var theObjects = {a:'aMethod',b:'bMethod',c:'cMethod'};
    for(var i in theObjects)
    {
        if (theObjects.hasOwnProperty(i))
        {
            if(window[i][theObjects[i]]() === false)
            {
                break;//or throw, or return...
            }
        }
    }
});

请注意，我不知道为什么你不想在这里使用某种形式的回调，因为这将是最简单的方法......但是，当然，这不是我的担忧。。： - ）

好吧，快速浏览一下你的游戏......看起来很有趣，继续努力吧:)。顺便说一句，你距离在整个地方使用回调只有一步之遥：

$('#placeBet').click(function() {
    placeBet();
});

可以写成：

$('#placeBet').click(placeBet);

在后者中，placeBet是一个回调函数。我认为你主要担心的是：

player.printHand();
dealer.printHand(isDealerHidden);

我在这里做的是更改printHand函数，最后添加：

if (this.name !== 'dealer')
{
    dealer.printHand(isDealerHidden);
}

我还没有阅读足够的脚本来使你的工作正常运行，但你明白了......一个更简单的方法就是不要明确地为经销商制作动画，而是改变玩家手中的所有动画师玩家动画完成后，以一些代码动画经销商...我知道，我说的是胡言乱语，但我在工作......生病了...祝你好运，无论如何。我可能会花更多时间检查你的进度，也许今晚可以更仔细地阅读你的脚本并编辑这个运球到实际可行的东西： - ）

Answer 4

您可以在方法中添加回调函数：

this.makeStuffHappen = function(callback)  {
   //do things like animations
   $(this).animate({ ... }, 200, callback);
   //or call the callback after everything is done:
   callback();
}

你可以像这样使用它：

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

除非事先完成（不使用回调），否则如何制作动画不会开火

4 个答案: