Ajax完成回调时不等待不是函数

Question

Prologue:

Though I've been dealing with standard [1] Ajax calls for a couple months, a simple mistake in my code made me realize today that there's so much more I still haven't grasped, that I feel I need some clarification on the matter.

The fact:

I'm writing an administration interface to add and remove users from a web application written in MVC 5. I had this code calling an action method (eventually executing a stored procedure on a SQL database) and then removing the DOM element showing user's details:

$.ajax({
    url: "RemoveUser",
    type: "POST",
    data: {
        userID: userID
    }
}).done(
    $('.row').filter(function () {
        if ($(this).data()["userID"] === userID) {
            return true;
        }
    }).remove()
);

While testing, I saw that the action method was being triggered after the DOM element being removed. While reviewing the ajax official documentation, I realized that my code within the done callback should've been wrapped within a function () { ... } block. I changed the code accordingly

$.ajax({
    url: "RemoveUser",
    type: "POST",
    data: {
        userID: userID
    }
}).done(function () {
    $('.row').filter(function () {
        if ($(this).data()["userID"] === userID) {
            return true;
        }
    }).remove();
});

and now it all works in the expected order.

Can anyone please shed some light on why the missed wrapping caused this change in the expected behavior?

---

[1] by standard I mean simple GET or POST actions that return DOM elements or basic data.

Answer 1

Can anyone please shed some light on why the missed wrapping caused this change in the expected behavior?

Because this:

one(two());

calls two , then calls one with two 's return value. But this:

one(function() {
    two();
});

creates a function and calls one with it. The function will only be run when and if the code in one calls the function.

one is $.ajax . two is your filter / remove code.

Answer 2

It's because the argument to done is expected to be a function. An actual function object (recall that functions are "first class" in Javascript, meaning that a function can be passed to other functions, or returned from a function, just like any other value) - which will then be executed when the Ajax response is received.

In addition, like in most languages, function arguments given in the form of more complex expressions need to actually be evaluated before the function is called. It presumably doesn't surprise you at all that when you do:

var a = "hello";
var b = "world;
console.log(a + " " + b);

the JS engine first evaluates the a + " " + b expression to obtain the string "hello world", which is then fed into console.log .

Well, exactly the same thing is going on in your first example:

$.ajax({
    url: "RemoveUser",
    type: "POST",
    data: {
        userID: userID
    }
}).done(
    $('.row').filter(function () {
        if ($(this).data()["userID"] === userID) {
            return true;
        }
    }).remove()
);

Here the argument to done has to be evaluated first - which means all of that code with .filter and .remove is executed. And this happens right away when the script is first loaded and ran. (It doesn't result in a function - arguably this should cause an error, but JS is a dynamically-typed language and notoriously relaxed about what it will allow without throwing an early error. I'm not going to get into the debate here as to whether this is a good or bad thing - whether you like it or not, it simply happens.)

In your second example, with the "wrapper function":

$.ajax({
    url: "RemoveUser",
    type: "POST",
    data: {
        userID: userID
    }
}).done(function () {
    $('.row').filter(function () {
        if ($(this).data()["userID"] === userID) {
            return true;
        }
    }).remove();
});

the difference is that a function value is actually passed in (as the API requires to work properly), and this function is not executed yet . The function argument is a "callback", to be executed when the Ajax is over. The argument still gets "evaluated" in advance, in that the function object is (I presume) created internally, somehow - but the code inside it doesn't get executed. jQuery's $.ajax simply accepts this function argument and executes it ("calls it back") when the time is right.

Answer 3

To add to what TJ mentioned .. this is how callbacks work. Suppose you had written the function function done(argument) . Lets say argument is a function which we pass as parameter(callback function). Now if you want to execute the argument then in your function definition you must include function done(argument){ argument(); } function done(argument){ argument(); } . In your case the argument is

function () {
$('.row').filter(function () {
    if ($(this).data()["userID"] === userID) {
        return true;
    }
}).remove();
}

So if you remove the function wrapper then the body will not execute when intended. I hope this makes sense. Please let me know if you have any more doubts on this.