Question

I want to run an ajax request within a function. Basically…

function doIt(id) {
    var myVar;
    $.ajax({
        ... url etc...
        success: function(result) {
            myVar = "Some stuff" + result;
            console.log(myVar);
        }
    })
    return myVar;
}

but myvar isn’t set to what it is when I log it after on success. How can I get that variable retuned by the function?

Answer 1

$.ajax is asynchronous, meaning it doesn’t finish before the next line is executed. What is happening is that return myVar; is being executed before the success event triggers.

Turn the async property off and that will superficially fix your problem:

function doIt(id) {
    var myVar;
    $.ajax({
        ... url etc...,
        async: false,
        success: function(result) {
            myVar = "Some stuff" + result;
            console.log(myVar);
        }
    })
    return myVar;
}

However, that will make your browser hang, so the best way to approach this is to put all processing inside of the success event.

function doIt(id) {
    var myVar;
    $.ajax({
        ... url etc...,
        async: false,
        success: function(result) {
            myVar = "Some stuff" + result;
            console.log(myVar);
            // TODO: Everything related to `myVar` here.
        }
    })
}