Question

I have a function called:

this.makeStuffHappen() 

Which makes different animations according to a switch statement and a couple of variables. Is it possible to make a function not fire unless all previous are done resolving.

I want to write something like

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

And then it should only run b after a is done, c after b is done and d after c is done. Is it only possible to make animations wait for the previous by chaining them? Is it possible to chain any function?

Edit: makeStuffHappen() is animating different elements so a.makeStuffHappen() will animate a different element than b.makeStuffHappen and so on.

Thanks.

Answer 1

A callback would be the easiest way, but since you don’t want to use a callback (which jQuery’s .queue() does require – well… a recursive callback anyways), you could let the methods you have return a bool:

$('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...
        }
    }
});

Of course, it is well possible the methods may vary depending on which object is called. You could work around this by using an object instead of an array, in which case your event handler could look something like:

$('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...
            }
        }
    }
});

Mind you, I don’t know why you don’t want to use some form of callback here, as it would be the easiest way to go… but that is, of course, none of my concern… 🙂

Well, had a quick look at your game… seems fun, keep working on it :). BTW, you’re one step away from using callbacks all over the place:

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

Can be written as:

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

In the latter, placeBet is a callback function.
I think you’re main concern is here:

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

What I’d do here, is change the printHand function, by adding this at the end:

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

I haven’t read enough of your script to make this work as you need it to, but you get the idea… An easier way would be not to animate the dealer explicitly, but alter all animators of the players hand to end with some code that animates the dealer after the players animation is completed… I know, I’m talking gibberish, but I’m at work… and sick… Good luck, anyway. I might take some more time checking your progress, maybe read your script more closely tonight and edit this dribble to something that will actually work 🙂