Question

I have a function that needs to call some functions sequentially. First, a fadeOut is called on a DOM node. In a callback, the DOM node is detached. This is function #1. But, after that is done, I need to call function #2.

So:

var func1 = function() {
    console.log('func 1 start');
    elt.fadeOut(2000, callback);
    console.log('func 1 end');
};
var func2 = function() {
    console.log('func 2 start');
    console.log('func 2 end');
};
var callback = function() {
    console.log('func 1 callback start');
    elt.detach();
    console.log('func 1 callback end');
};
func1();
func2();

The above outputs:

func 1 start
func 1 end
func 2 start
func 2 end
func 1 callback start
func 1 callback end

I need the callback to finish before func2() is called. How do I do it?

Working example here: http://jsfiddle.net/y2vj8/2/

[EDIT]:

OK, it seems necessary to give you some explanation of why I want func2() called after the callback is finished, else I don’t foresee getting an answer soon :(.

func1 fades a div (call it div1) out and then detaches is from the DOM. This is a publicly available function.

func2 is a user-defined callback to a certain event (a click on some other div, say, div2). It may be undefined, but it may contain absolutely any code.

When div2 is clicked, func1() is called, then func2() is evaluated, and if it is a function, it is also called.

If the user calls func1() manually, func2() is never called.

func1 is unaware of the click event on div2 and therefore cannot check whether func2 should be called or not.

Answer 1

You could do something really silly like this (jsFiddle):

var func1 = function(callback) {
    console.log('func 1 start');
    $('#fadeOut').fadeOut(2000, function() { func1_callback(callback) });
    console.log('func 1 end');

};
var func2 = function() {
    console.log('func 2 start');
    console.log('func 2 end');
};
var func1_callback = function(callback) {
    console.log('func 1 callback start');
    $('#fadeOut').detach();
    console.log('func 1 callback end');
    callback.call();
};
func1(func2);

Honestly, I’d probably look at restructuring your app. I don’t understand why you’re doing it the way you’re doing it.