javascript - Wait for jQuery $.get function to finish before running code

Question

In the following, the return statement is being executed before the call to $.get() finishes. How can I change this?

var aft = {};

aft.getToken = function (url) {

    var theToken;

    //Get the token value
    $.get(url, function (data) {

        theToken = $(data).find('input[name=__RequestVerificationToken]').val();

    }, "html");

    return theToken;

};

Answer 1

You can't—at least not sensibly. While there is an async property you can set on jQuery ajax requests, I've had serious problems trying to use it with a false value in the past.

Try to re-think what you're trying to accomplish:

var aft = { yourToken: '' };

aft.setToken = function (url, callback) {
    $.get(url, function (data) {
        this.yourToken = $(data).find('input[name=__RequestVerificationToken]').val();

        if (callback)
           callback.apply(this);
    }, "html");
};

And then:

aft.setToken("url.php", function() {
   alert("Token retrieved = " + this.yourToken);
});

Or, if your callback only needs access to the returned data, then you could more simply do

if (callback)
    callback(data);

And then

aft.setToken("url.php", function(dataReturned) {
   alert("Ajax data retrieved = " + dataReturned);
});