Question

externalCSSContents = [];

function getExternalCSSContents(){
        href = document.styleSheets[0].href;
        $.post(href, function(result){
            externalCSSContents.push(result);
            alert(externalCSSContents.length); // 1
        });
}

getExternalCSSContents();
alert(externalCSSContents.length); // 0

Can someone please explain to me why at the scope of $.post() method array externalCSSContents is local?

Answer 1

That’s because the ajax request has not finished executing and you are alerting the contents of the array.

You could do this instead.

function getExternalCSSContents(){
    href = document.styleSheets[0].href;
    return  $.post(href, function(result){ externalCSSContents.push(result); });
}

$.when( getExternalCSSContents() ).then(function(){ 
        alert(externalCSSContents.length);
});