javascript: pass function as a parameter to another function, the code gets called in another order then i expect

Question

i want to pass a function to another function as a parameter.

I want to do that because the latter function calls an async Jquery method and AFTER that gives a result back, i want some javascript code executed.

And because this function is called from multiple places, i want the code to execute (after the async Jquery code gets executed) to be passed in the function. Makes sense? i hope :)

Now what is see is that the order in which the code is executed is noth what i want. I've simplified the code to this code:

$('#AddThirdParty').click(function() {
    var func = new function() {
        alert('1');
        alert('2');
        alert('3');
    }
    alert('4');
    LoadHtml(func);
    alert('5');
});
function LoadHtml(funcToExecute) {
    //load some async content
    funcToExecute;
}

Now what i wanted to achieve (or at least what i thought would happen) was that alert4 would fire, then the loadhtml would fire alert1, alert2 and alert3, and then the code would return to alert5.

But what happens is this: alert1, alert2, alert3, alert4, alert5.

Does anyone know what i'm doing wrong and why this is the order in which the code is executed?

It looks like the alert1..alert3 gets executed when i define the new function(), but why doesn't it ALSO get executed when i call it from the LoadHtml function?

Answer 1

$('#AddThirdParty').click(function() {
    var func = function() { // NOTE: no "new"
        alert('1');
        alert('2');
        alert('3');
    }
    alert('4');
    LoadHtml(func);
    alert('5');
});
function LoadHtml(funcToExecute) {
    //load some async content
    funcToExecute(); // NOTE: parentheses
}

Two errors: the syntax for anonymous functions does not include the keyword new; and JavaScript requires parentheses for function calls, even if functions do not take any arguments. When you just say funcToExecute, that is just a variable giving its value in a context where nothing is using that value (kind of like writing 3; as a statement).

You might notice that you already know how to use anonymous functions: you did not write $('#AddThirdParty').click(new function() ...);

Answer 2

$('#AddThirdParty').click(function() {
    var func = new function() {
        alert('1');
        alert('2');
        alert('3');
    }
    alert('4');
    LoadHtml(func);
    alert('5');
});
function LoadHtml(funcToExecute) {
    //load some async content
    funcToExecute;
}

The new keyword creates an object from the function. This means the function (which is anonymous) gets called immediatly. This would be the same as

var foo = function() {
    alert("1");
    alert("2");
    alert("3");
}
var func = new foo();

This means your creating a new object (not a function!) and inside the constructor your alert 1,2,3. Then you alert 4. Then you call LoadHtml which does nothing, then you alert 5.

As for

funcToExecute;

The funcToExecute is just a variable containing a function. It actually needs to be executed.