jQuery passing a function call through to another function and order of execution

Question

I have this javascript:

triggerAnimation(listItem,toggleToggleRadioListItem(listItem));


function triggerAnimation(listItem,passThruFunction){
    listItem.find(".inlineLoading").show();
// pause and then call the toggle function
    $("body").animate({opacity: 1}, 1000, 
    function(){
        alert("a");
    passThruFunction;
    }
    );  
}

function toggleToggleRadioListItem(listItem) {
    alert("b");
};

What is supposed to happen:

• triggerAnimation is called passing an object and a function
• triggerAnimation does a dummy animation (to create a pause) then raises an alert and triggers a callback function which executes the function that was passed through.
• the function that was passed through is called raising an alert.

Based on the above, I'd expect the alert A to appear before alert B but that is not the case. What happens is that (it seems) alert B is called as soon as triggerAnimation() is called. Why is that? How can I achieve that behavior?

Answer 1

You can delay the execution by passing in a function and calling it later.

triggerAnimation(listItem, function () {
   toggleToggleRadioListItem(listItem)
});


function triggerAnimation(listItem,passThruFunction){
    listItem.find(".inlineLoading").show();
// pause and then call the toggle function
    $("body").animate({opacity: 1}, 1000, 
    function(){
        alert("a");
        passThruFunction();
    }
    );  
}

function toggleToggleRadioListItem(listItem) {
    alert("b");
};