Returning value in function only when ajax call has completed?

So I am using mootools, and I have 开发者_运维百科a function that calls an ajax script to get a value. This value is then returned in the function. However, for some reason, the function returns too quickly for the AJAX call!

What am I doing wrong...

function getCredits() {
    var loadGlobalTab = new Request.JSON({
        url: {my api, url removed for security},
        evalScripts : true,
        async: false,    // I tried this, hoping it would stop the function from returning too soon, but no dice.
        onSuccess: function(returnInfo) {
            alert(returnInfo.data.total);
            return returnInfo.data.total;
        }
    }).send(sendData);    // Where sendData has been defined prior
}

The alert returns the proper value, so I know the AJAX call works, however, the function itself returns nothing, meaning that while the AJAX call is being made, the function ends right away.

I tried putting a return 100 at the end, just for kicks, and the function returned 100.

edit oh dear. beaten due to a phone call. nevermind!

ajax is asynchronous and using async: false is just the wrong way to go about it. instead, have a second callback function run with the result of the query called from the onComplete/onSuccess directly.

IF you really have to do it so it blocks, then this works fine:

var blockingCheck = function() {
    var obj = {};
    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode({
                text: 'some text',
                array: [1, 2, 'three'],
                object: {
                    par1: 'another text',
                    par2: [3, 2, 'one'],
                    par3: {}
                }
            }),
            delay: 3
        },
        async: false,
        onSuccess: function(response) {
            obj = response;
        }
    }).send();

    return obj;
};

console.log(blockingCheck());

http://jsfiddle.net/dimitar/eG4t2/

ajax is asynchronous

Meaning that JS will read right through it and if there is no return right then, then there is nothing.

The good thing to do is a callback instead of a return:

function getCredits() {
    var loadGlobalTab = new Request.JSON({
        url: {my api, url removed for security},
        evalScripts : true,
        headers: {'ACCEPT': 'json','X_REQUESTED_WITH':'jsonhttprequest'},
        onSuccess: function(returnInfo) {
            alert(returnInfo.data.total);
            //goto callback
            getCredits_Callback(returnInfo.data.total);
        }
    }).send(sendData);    // Where sendData has been defined prior
}

function getCredits_Callback(total){
   //do something with total
}

2nd approach:

function getCredits() {
    var loadGlobalTab = new Request.JSON({
        url: {my api, url removed for security},
        evalScripts : true,
        headers: {'ACCEPT': 'json','X_REQUESTED_WITH':'jsonhttprequest'},
        onSuccess: getCredits_Callback
    }).send(sendData);    // Where sendData has been defined prior
}

function getCredits_Callback(returnInfo){
   //do something with returnInfo
}

It's returning nothing, because your return statement is returning into an attribute of an object, not the variable you think it's returning to. You're better off passing off the function of your "onSuccess" to a separate handler function. That way you can deal with the return values outside of a closure.