How to run javascript functions located in one function sequentially?

Question

So I almost got this the way I want. I have .animate( some stuff) in the dealone() dealonedealer() functions. However, all the animations are happening at the same time since the function dealCards() doesn't care about waiting till one function is over before going to the next line and running that.

Is there a way that I can have each of these 5 lines inside the dealcards() function, run sequentially, instead of all at once? For example, hand1 gets a card and hand dealer waits to be dealt his card till hand 1 receives his, then hand dealer, and then hand card, then hand dealer, and then goes to hitorstay() function. Instead of them all running at once?

function dealCards() {
    hand1.cards = [dealone()];
    handD.cards = [dealonedealer()];
    hand1.cards.push(dealone());
    handD.cards.push(dealonedealer());
    hitOrStay();
}

edit: Or is there some way I can just put each line on a timer or something? Like hand1.cards = [dealone()]; should take 8 seconds, and then go to next line, should take/wait 8 seconds, then the next...

Answer 1

Javascript runs in a asynchronous way.. so each line will be executed instantly... regardless of whether last lins execution is completed or not... its not blocking.

You can use promise-defer like it is used in AngularJS.

Answer 2

Since you mention .animate() i would suggest using the complete / done option of animations (Finish one animation then start the other one) Turns out there is already this thread that might be of use to you Finish one animation then start the other one , though it seems like you will have to refactor your code.

Eitherways i think it would be better to refactor your code because it is always good for the animations to be async as i would not like the res of my page to be blocked while one element animates :D