CODEWITHSUNDEEP
javascriptjquery
user_78361084
user_78361084

Reputation: 3898

How do I execute functions one after the other?

Maybe I'm using it wrong, but I want to chain 3 functions, with the second function starting when the first function completes and the third function starting when the second function completes. According to the docs I should be able to do it like this:

$.when( first() ).then( second() ).then(third() );

They all seem to be executing at the same time. What gives?

My fiddle

I've also tried:

first().then( second() ).then(third() );

This will fade in the first div, but not the second and third;

Upvotes: 2

Views: 469

Answers (3)

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

If you want to do each function after animation completes JS Fiddle,

Use:

var first = function(callBack1, callBack2){
    $("#div1").fadeIn(2000, function(){callBack1(callBack2)});
}
var second = function(callBack){
  $("#div2").fadeIn(2000, callBack);

}

var third = function(){
  $("#div3").fadeIn(2000);

}


first(second, third);

Upvotes: 0

Amadan
Amadan

Reputation: 198314

You're forcing the immediate execution of those functions. (By the way, they are not executing at the same time, but very quickly one after another, since JavaScript is single-threaded.)

You need to write $.when(first).then(second).then(third) (where first is a promise), and let the library execute them. not execute them yourself (which is what the parens do).

EDIT: Oh, didn't see the fiddle. Yeah, what SeanJohnson said.

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Just first(); second(); third(); will work just fine. JavaScript is single-threaded.

The use of when and then is for things that integrate Promise, such as ajax requests (at least, that's my understanding as a non-jQuery-user)

EDIT: Here's your jsFiddle remade using CSS only, by the way ^_^

Upvotes: 1

Related Questions