When to assign functions to variable, using jquery

Question

so I've been messing around with some Jquery Ajax promises/deffers etc... and i've come across something I don't completely understand, not strictly related to the Jquery Ajax.

I have always declared and called functions like so:

function foo1() { //sets function
    alert('foo1');
}

foo1(); //calls function

But it seems the more I see different code a lot of people are declaring functions like the following, I just copied and pasted an example I saw so I would't miss anything:

var promise = $.ajax({
    url: "/myServerScript"
});

promise.done(myStopAnimationFunction);

I understand what the above does, just an example.

The question is, is it better to assign functions to variables? What are the pros/cons, and in what situations is this way used? At what point in this code is the actual function called. Does

    promise.done(myStopAnimationFunction);

call both the ajax function, and then the callback, or just the callback?

Thanks

_"Does `promise.done(myStopAnimationFunction);` call both the ajax function, and then the callback, or just the callback?"_ - Actually it's option (c) That line calls just the `.done()` method to tell jQuery that you want it to call your `myStopAnimationFunction` at a later point after the Ajax request is done. It is jQuery that eventually calls your callback. — nnnnnn, Aug 14 '13 at 23:20
The promise object has some properties that are functions (or function pointers if javascript had pointers) and you can call them. Its handy and jQuery's `$.ajax()` uses that to provide functions you can call to let you control the ajax process and be notified of how its going. — Lee Meador, Aug 14 '13 at 23:37

score 2 · Answer 1 · edited May 23 '17 at 10:31

Those are two very different things! The first one is a function declaration. The second one is a function invocation, and what is assigned to the promise variable is the value returned by the function you're calling ($.ajax).

In any case, it is possible to assign functions to variables too (but I'm not sure if that's what you're really asking – if it is, this is a duplicate of var functionName = function() {} vs function functionName() {}).

Does promise.done(myStopAnimationFunction); call both the ajax function, and then the callback, or just the callback?

Neither. That line is a call to done on the promise object, to register a callback to be called when the ajax response arrives. At that point you call done, the ajax request may have already fired, and the response even might already be available (if that's the case, the callback will be called immediately).

I'm glad it did! I hope you clarified your doubts. – bfavaretto Aug 15 '13 at 00:10 — bfavaretto, Aug 15 '13 at 00:10

Prisoner · Accepted Answer · 2013-08-14T23:27:36.203

In your example, you're assigning your promise variable to what $.ajax returns (which is a jqXHR object)

var promise = $.ajax({
    url: "/myServerScript"
});

Your then saying that once it's done, you want to call myStopAnimationFunction. Because $.ajax is async by default, the browser will skip right over this and only call your myStopAnimationFunction when the request is complete.

promise.done(myStopAnimationFunction);

Now, with your myStopAnimationFunction; you could always just do the following:

promise.done(function(){
    $('.loader').hide();
});

but if you have code which you'll be using a lot, put it in a function so you don't need to repeat yourself (see DRY) - this has nothing to do with jQuery, however.

Your example is exactly the same as doing:

$.ajax({
    url: "/myServerScript"
}).done(function(){
    $('.loader').hide();
});

so: var promise = $.ajax({ url: "/myServerScript" }); starts/runs that function — JamesGP, Aug 14 '13 at 23:42

When to assign functions to variable, using jquery

2 Answers2