首页 > 解决方案 > 使用 jQuery 按顺序加载多个脚本文件并延迟 - 结合找到的两个函数

问题描述

我尝试修改 Stackoverflow 上的以下函数以使用 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
});

我想将它与以下代码结合起来,以便 aboce 函数 getMultiScripts 中的所有 ajax 请求都将被延迟。

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

我尝试这样做是因为在 Firefox 浏览器中 $.getMultiScripts 不会按顺序加载脚本。

会很好,如果有人能告诉我如何添加 $.Deferred(); 到 $.getMultiScripts 函数中的所有 ajax 请求。

对不起,我不是编码员..

我试过了 ..

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

..但这不起作用!

问候

标签: javascriptjqueryajaxdeferredgetscript

解决方案


用jQuery按顺序加载多个脚本文件

目前最好的解决方案:

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

推荐阅读