Why does .done() require an anonymous function?

Question

Why does this work:

$.ajax({ url: urlIn, dataType: 'json', cache: false })
     .done( function( data ) { doStuff( data ) });

But not this:

$.ajax({ url: urlIn, dataType: 'json', cache: false })
     .done( doStuff( data ) );

That second one "data" is not defined. It took me a while to realize that was the problem. But its mysterious to me why it works like that.

Answer 1

By calling .done( doStuff( data ) ) , you're actually invoking the doStuff function immediately . What gets passed to the done function is its return value , which is equal to undefined in your case.

Now, if the doStuff function were to return a function itself, that returned function could then be called as a callback by doStuff .

What you want to do instead is pass the function as a value without invoking it right away:

$.ajax({ url: urlIn, dataType: 'json', cache: false }).done(doStuff);

Answer 2

Because those aren't the same thing.

This is a function definition:

function( data ) { doStuff( data ) }

This is a function invocation :

doStuff( data )

It's telling the code to execute doStuff(data) now and use its result as the callback function. Since data doesn't exist yet, that won't work. (And if doStuff doesn't return a function, that won't work.)

The analogous version is simply this:

$.ajax({ url: urlIn, dataType: 'json', cache: false })
 .done( doStuff );

data will be passed in automatically.

Answer 3

It doesn't. It just requires function reference , and not calling a function . Anonymous function ( function(){} ) would be correct function reference, so as doStuff . But by doing doStuff() , you are calling this function directly and you can't use doStuff as you need to pass parameters. So you should use function( data ) { doStuff( data ) } .

Answer 4

It does not require an anonymous function. You do have it pass it a function reference though. So, in your example, this would work just fine:

$.ajax({ url: urlIn, dataType: 'json', cache: false })
     .done( doStuff );

What you were doing was calling doStuff(data) immediately and passing the return value of that to .done() which was likely not a function reference. You must pass a function reference (without the parens - because the parens cause it to execute immediately).

This is a very common mistake. Functions without the parens are a reference to that function that can then be called later. Functions with the parens are executed immediately and the return value from executing the function is passed instead.