使用jQuery加载外部javascript并禁止“不建议在主线程上使用同步XMLHttpRequest…”

Question

I've been reading several posts on this topic but haven't been able to find a solution yet. I'm using jQuery to set up a simple plugin which depends on some other files as well (for example a language file). I'd like to provide an as easy as possible set up for the end user so I would like to dynamically load those javascript files. When I do this I either run into the warning Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. or I have to delay my script because the asynchronous call isn't yet completed at the point where I need the contents of the file included.

I've tried several ways to achieve this without delaying the script:

Attempt 1. By appending to the body

$('body', document).append('<script type="text/javascript" src="myfile.js"></script>');

Attempt 2 - By using $.getScript

$.ajaxSetup({ async: false });
$.getScript('myfile.js')
    .done(function(script, textStatus) {
        // success code... map variables
    })
    .fail(function(jqxhr, settings, exception) {
        if( window.console ) {
            console.log('error loading the file);
        }
    });

Attempt 3 - By using $.ajax, roughly the same as $.getScript

$.ajax({
    url: 'myfile.js',
    dataType: 'script',
    async: false,
    success: function(script, textStatus) {
        // success code... map variables
    }
});

Attempt 4 - using $.holdReady() but this seems ineffective since the plugin is only initiated within $(document).ready(function() { $('.myDemo').myplugin(); } .

$.holdReady( true );
$.getScript( 'myfile.js', function() {
    // success code.. map variables
    $.holdReady( false );
});

How should an external file be attached/included without having to delay the script and not to ensure the warning isn't fired. Is this even possible or am I asking for water to be frozen and melted at the same time?

Answer 1

I've now fixed it nesting ajax requests and building upon the complete -callback. I'm not sure if this is the most desireable way but with two external files (for now) it's maintainable.

There's a downside; at this moment for each instance of the plugin two files are requested. So some sort of cache-variable should also be implemented and based on if the files are loaded already they should or shouldn't be loaded the next iteration.

Other suggestions are welcome!

$.ajax({
    url: 'firstfile.js',
    dataType: 'script',
    success: function() {
        // success code.. map variables
    },
    complete: function() {
        $.ajax({
            url: 'secondfile.js',
            dataType: 'script',
            success: function() {
                // success code.. map variables
            },
            complete: function() {
                // call function to continue the procedure
            }
        })
    }
});