Load multiple script files with jQuery in order with deferred - combining two functions found

Question

I try to modify the following function found on Stackoverflow to load multiple Scripts with jQuery.

$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.ajax({
        cache: true,
        url: scr,
        dataType: 'script'
    });
    });

    _arr.push($.Deferred(function( deferred ){
        $( deferred.resolve );
    }));

    return $.when.apply($, _arr);
}

var script_arr = [
    'myscript1.js', 
    'myscript2.js', 
    'myscript3.js'
];

$.getMultiScripts(script_arr, '/mypath/').done(function() {
    // all scripts loaded
});

I want to combine it with the following code so that all ajax request in the aboce function getMultiScripts will be deferred.

var d1 = new $.Deferred();
var d2 = new $.Deferred();
var d3 = new $.Deferred();
var d4 = new $.Deferred();

$.when( d1, d2, d3, d4 ).done(function () {
    console.log('Loaded in order.');
});

d1.resolve($.getScript("/assets/libs/swal/sweet-alert.min.js"));
d2.resolve($.getScript("/assets/js/jquery.form.js"));
d3.resolve($.getScript("/assets/js/jquery.preloader.js"));
d4.resolve($.getScript("/assets/js/item_inventory.js"));

I try this because in Firefox Browser $.getMultiScripts does not load the scripts in order.

Would be nice, if someone could tell me how to add $.Deferred(); to all ajax requests in $.getMultiScripts function.

Sorry, I am no coder ..

I tried ..

$.getMultiScripts = function(arr) {
    var df = new $.Deferred();
    var _arr = $.map(arr, function(scr) {
        return df.resolve($.ajax({
            cache: true,
            url: scr,
            dataType: 'script'
        }));
    });

    return $.when.apply($, _arr);
}

.. but this does not work!

Regards

Answer 1

Load multiple script files with jQuery in order

The best solution for the moment:

// very simple with jQuery

$.when(
    $.getScript( "/assets/libs/swal/sweet-alert.min.j" ),
    $.getScript( "/assets/js/jquery.form.js" ),
    $.getScript( "/assets/js/jquery.preloader.js" ),
    $.getScript( "/assets/js/item_inventory.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){
    window.console.log('all complete loaded');
});