A function into another function jquery

Question

My question is maybe simple but I can't find the answer over the internet so i'm asking here :

I have the following code :

function TriggerHeader() {
//doing great stuff
}
function TriggerSlider() {
//doing other stuff
}

After every conditions have been examinated, I have a function that calls the right triggers.

function Action() {
 $(".content").fadeOut("fast",function () {
 TriggerSlider() {
 TriggerHeader();
 };
});
}

So the TriggerSlider() is called when the (".content").fadeOut is over (as I want it to be) but I'm looking for the correct way to call TriggerHeader(); when the TriggerSlider() is over. The way I wrote it is wrong, but I don't know why. Can somebody enlight me ?

Answer 1

It depends on the contents of TriggerSlider and TriggerHeader.

If they are synchronous:

TriggerSlider();
TriggerHeader();

If TriggerSlider has a single animation with a callback available:

function TriggerSlider(callb) {
 //Most of your code here
 $("element").slideUp(callb);
}
TriggerSlider(TriggerHeader);

Using the Promise API

function TriggerSlider() {
 //Most of your code here
 return $("element").slideUp();
}
$.when(TriggerSlider()).done(TriggerHeader);

• Kazzin: It works fine with the Promise API (doesn't work with the callback) Thank you very much !

Answer 2

These lines are syntactically incorrect:

TriggerSlider() {
 TriggerHeader();
};

You'd have to adapt the TriggerSlider function to allow for a callback, once it is finished:

function TriggerSlider(callback) {
 // do stuff
 // ... 
 // now invoke the callback: 
 callback();
 // or pass it to a jQuery function
}

Now you can set up the chain like this:

function Action() {
 $(".content").fadeOut("fast",function () {
 TriggerSlider(TriggerHeader);
 });
}

Answer 3

It really depends on how TriggerSlider() and TriggerHeader() are implemented. If they don't do anything involving timeouts and 'separate threads', they way to call one after the other would be:

TriggerSlider();
TriggerHeader();

;-)

On the other hand, if TriggerSlider() contains animations or other things that are asynchronous, you'll need to implement it's completion callback as a parameter to the function:

function TriggerSlider(completionCallback) {
 setTimeout(500, function() {
 // do something
 // and finally
 completionCallback();
 }
}

Now you can call your TriggerSlider and pass it the function to call on completions:

TriggerSlider(TriggerHeader);

Note that I don't pass TriggerHeader(), because that would call the function and return the result. I pass the function as a function, and the function call occurs in TriggerSlider.

Answer 4

The problem you have is that you are trying to redefine what Triggerslider does when you are writing it the way that you did TriggerSlider() { //code }. This is not syntactically correct.

If you want to execute the header function after the slider this should work.

function TriggerHeader() {
 //doing great stuff
}
function TriggerSlider() {
 //doing other stuff
 TriggerHeader();
}
function Action() {
 $(".content").fadeOut("fast",function () { TriggerSlider();});
}

There are other ways to go at this problem using callbacks. but if you always want to trigger the same functions in order this should work.