Variable does not have its value after done or fail in ajax

Question

I created a function to return true or false when ajax. At the beginning of the function I declared a "r" variable to receive true if it succeeds or false in case of failure, but the variable does not have its modified value. and ends up returning the value that was assigned at the beginning false. What’s wrong with it?

function loadSkeleton(r) {
    var r;
    $.ajax({
        method: "POST",
        url: "/sys/ajax/publicacao.xhtml"
    }).done(function (answer) {
        $('head').append('<link rel="stylesheet" type="text/css" href="/css/post.css">');
        $('head').append('<link rel="stylesheet" type="text/css" href="/css/aside-publication.css">');
        $('head').append('<script type="text/javascript" src="/scripts/js/other-publi.js"></script>');
        setTimeout(function () {
            $('.side-left').html($(answer).find('content').html());
        }, 2000);
        r = true;
    }).fail(function (jqXHR, textStatus) {
        $('.side-left').html('<p>Failed request</p>');
        r = false;
    });
    return r;
}

The .done is working because the changes in the DOM are visible.

Answer 1

Good evening. What is occurring is that the function you created is immediately returning the value of r, and the methods .done and .fail sane assíncronos, i.e., they receive as parameter functions (in this case, you are two anonymous functions) that are invoked subsequently (when the request is successfully completed or an error occurs).

To try to adapt your function to the goal you want (receive true or false depending on the success of the request), you can submit a function as an argument and invoke it when necessary. Something more or less like this:

function loadSkeleton(fnOK) {
    $.ajax({
        /* ... */
    }).done(function (answer) {
        /* ... */
        fnOK(true);
    }).fail(function (jqXHR, textStatus) {
        /* ... */
        fnOK(false);
    });
}

/* 
    Quando você for chamar a função loadSkeleton, passe como argumento
    uma função (neste caso aqui, uma função anônima)
*/

loadSkeleton(function(ok) {

    /*
        O parâmetro será true, ou false, 
        dependendo de como ela for invocada lá no loadSkeleton.
    */
    console.log(ok); 

});

/* 
   Ou declare sua função - callback antes e passe como argumento 
   Obs.: sem os parêntese, apenas a referência - parênteses iria invocá-la, 
   que não é o que queremos

*/

var fnOK = function(ok) {
    console.log(ok); 
};

loadSkeleton(fnOK);

I suggest reading of this answer here at Sopt about callbacks and this chapter about Functions of Higher Order / High Order Functions