Is there any "idiom" or pattern in JS that'll let me pause execution while an animation runs?

Question

I basically have this code:

for (var i = 0; i < num; i++) {
  ShowCard(i);
}

Right now, ShowCard is just adding a DOM element, but I want it to have an animation that'll show this card flying from somewhere else (the shoe) into its final destination, and I want the second card to wait until the first one is done flying before it starts.

Is there any way to achieve this, without rewriting my whole code in "continuation passing" style?

I'm assuming the answer is no and i'll have to bit the bullet and do it, but thought i'd ask.

Thanks!
Daniel

Answer 1

The answer is no.

The only blocking APIs in JavaScript are the built in ones - alert, confirm and prompt.

Answer 2

You can try jQuery's new deferred API.

Answer 3

You could put in a global locking variable inMotion that indicates the second card can't move. Then in the code that is calling for the second card to move, you can check this boolean and if it's not time to move, use setTimeout or setInterval to continuously call your method until it is time to move it.

Answer 4

Evil hack: Instead of making your animations work using setTimeout and friends (functions that give away the control flow), make them work the dumb way using while loops, spin lock style. In pseudo code:

next_time = curr_time + delta;
while(get_time() < next_time){} //Do nothing