CODEWITHSUNDEEP
javascriptjquery
Elorfin
Elorfin

Reputation: 2497

Stop JS function execution while an AJAX call is not finished

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;
}

Upvotes: 2

Views: 3419

Answers (3)

Karl Mendes
Karl Mendes

Reputation: 649

Try this:

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);
        successFlag = false;
        switch (resType)
        {   // Check resource type to know how to include it
            case 'js':
                jQuery.ajax({
                    async:false,
                    type:'POST',
                    url: resource,
                    data: null,
                    success: function(){successFlag =true;}
                });
                break;
            case 'css':
                // Load CSS file ...
                break;
            default:
                console.error('CAPTIVEA.resources : "' + resource + '" is not an includable resource.');
                break;
        }
        ret = successFlag;
    }

    return ret;
}

I see it as the only solution, even though we have to add a global variable (successFlag). The other solution is just to do what you have to do on your success callback but that way your function is not gonna work like you're expecting.

Upvotes: -1

RoToRa
RoToRa

Reputation: 38390

Using there is usually no need for synchronous calls. The whole point of AJAX is that it's asynchronous. The first A stands for asynchronous.

Why do you need prevent your function to return? Usually it's because you want to use the resources (in this case the script) when it's loaded. You have to use a callback instead:

WRONG:

$.getScript(resource);
doSomethingWithResource();

RIGHT:

$.getScript(resource, function() {
  doSomethingWithResource();
});

Upvotes: 1

Richard Dalton
Richard Dalton

Reputation: 35793

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
});

Upvotes: 5

Related Questions