Question

I have wrote a little function to dynamically include CSS file or JS file.
I load JS files with jquery function $.getScript().

I want to prevent my function returns before my AJAX call is finished.

I have tried something like this, but it doesn’t work :

CAPTIVEA.resources._includeResource = function(resource) {
    var ret = false;

    if (CAPTIVEA.resources.isIncluded(resource))
    {   // Resource already included => do nothing
        console.log('CAPTIVEA.resources : "' + resource + '" is already included.');
        ret = true;
    }
    else
    {   // Resource not included => try to include it
        var resType = CAPTIVEA.resources.getType(resource);
        switch (resType)
        {   // Check resource type to know how to include it
            case 'js':
                $.when(
                    $.getScript(resource, function(data, textStatus){
                        console.info('CAPTIVEA.resources : "' + resource + '" dynamically loaded.'); //success
                    })
                ).done(function(){
                    ret = true;
                });
                break;
            case 'css':
                // Load CSS file ...
                break;
            default:
                console.error('CAPTIVEA.resources : "' + resource + '" is not an includable resource.');
                break;
        }
    }

    return ret;
}

Answer 1

You could use $.ajax and set async to false so that it will wait for the response before continuing:

$.ajax({
   url: resource,
   success: function(data, textStatus) {
                        console.info('CAPTIVEA.resources : "' + resource + '" dynamically loaded.'); //success
   },
   dataType: 'script',
   async: false
});