Understanding of callbacks

Question

I've followed this explanation here, but am still unsure how callbacks work.

I do my call here:

scene.foo(scene.myCallBack("mymap"));

And my callback stuff here:

1) scene.foo calls foo and passes in CallBack function with "mymap" JSON data

2) foo's $.ajax defines its success as the passed in CallBack. Once the data is processed, success calls the callback, myCallBack()

3) myCallBack attempts to getJSON from the file name and console.log it as a string with JSON.stringfy

Am I not understanding this correctly?

foo : function (callback) {
    $.ajax({
        success: callback //once AJAX request is successfull, $.ajax will call callback (myCallBack) and pass response back to callback
    });
},
myCallBack : function (name) {
    $.getJSON("C:/Users/danniu/Desktop/JavaScript/tilemap/maps/" + name + ".json", function (data) {
        var myJSONText = JSON.stringify(data);
        console.log("json: " + this.myJSONText);        
    });
},

Answer 1

You're close to the solution.

scene.foo(scene.myCallBack("mymap")); first exectue scene.myCallBack("mymap") and then the result is passed to scene.foo(...)

It's similar to write:

var result = scene.myCallBack("mymap");
secene.foo(result);

This is pretty weird in this case, because scene.myCallBack("mymap"); doesn't return anything interesting to scene.foo

Note that $.getJSON(...) already does an Ajax request for you.

Answer 2

As soon as you stick parentheses on, it stops being a callback. scene.myCallBack can act as a callback; scene.myCallBack("mymap") is just undefined (the return value of your function, as it does not have an explicit return statement and thus implicitly returns undefined).

If you want to have he $.ajax do myCallBack on success AND have custom arguments with it, you need to wrap it:

scene.foo(function() { scene.myCallBack("mymap"); });

Or equivalently,

fooCallback = function() { scene.myCallBack("mymap"; };
scene.foo(fooCallback);

EDIT to clarify some concepts:

And can you explain why putting parentheses on it makes it not a callback?

Putting parentheses on a function executes a function, giving a value back. A callback must be a function.

For example, let's say your Mum wants you to eat an apple when you get home. She could leave you a note, "Growler, when you get home, eat an apple!":

var eatApple = function() {
  growler.eat('apple');
}

growler.on('getHome', eatApple);

is one way to write such a thing. However, if you write

growler.on('getHome', eatApple());

it's like your Mum feeding you an apple, then writing a note "Growler, when you get home, __" and placing the apple core on the blank. I don't know about you, but I'd be rather surprised by such a note; and I daresay your JavaScript interpreter is likewise surprised as well.

A callback is a function to be done at a later time. If you execute it (with parentheses), you are only left with the function's results; and thus the function is not a callback, since your event will try to call back the result (the apple core), and not the function (process of eating an apple).

(An advanced topic is a function that returns a function; in this case, the result can be the callback, such as, growler.on('getHome', whatShouldIDoNow()). whatShouldIDoNow is still not a callback; the function that it would return would be.)

If $.getJSON is already an AJAX request, how can I get the callback from that?

I do not understand the question. You provide $.getJSON with callbacks at the time you invoke it; those functions will be called back at the appropriate time, if such happens.