Как загрузить переменное количество скриптов с помощью jQuery.getScript () перед запуском кода JavaScript?

Question

Мне нужно загрузить переменное количество исходных файлов javascript перед запуском кода javascript, который зависит от них. Иногда необходимо загрузить 1 сценарий, а иногда 2. Метод getScript () позволяет загрузить один сценарий - как я могу использовать его для загрузки x количества сценариев перед запуском его внутреннего кода?

$.getScript("test.js", function(){
    // code to run after script is loaded
});

Что мне нужно:

$.getScript(new Array("1.js","2.js"), function(){
    // code to run after all scripts are loaded
});

Спасибо

Answer 1

Если вы используете jquery 1.5, вы можете использовать новый отложенный синтаксис.

$.when(
    $.getScript("1.js"), 
    $.getScript("2.js"), 
    $.getScript("3.js")
).then(function(){
    alert("all loaded");
});

Просто передайте сценарии, которые вы хотите загрузить.

Answer 2

Я предлагаю вам взглянуть на LABjs

Именно в этом заключается его цель.

Answer 3

Я использую RequireJS довольно широко, и это очень хорошо. Тем не менее, это может работать для вас:

$.getScript("1.js", function(){
    $.getScript("2.js", function () {
        // code to run after all scripts are loaded
    });
});

Это довольно скверный и маленький блок кода, IMO, но если на самом деле это всего лишь два сценария, это, вероятно, того стоит. Логика вышеизложенного также может быть извлечена в универсальную функцию, но если вы зайдете слишком далеко по этому пути, возможно, будет разумнее использовать RequireJS или LABjs, как предложено JAAulde .

Answer 4

Один из способов - перечислить все ваши скрипты в массиве, отследить, сколько скриптов загружено и сколько вы хотите загрузить. Примерно так:

var toLoad = ["1.js", "2.js", "3.js"], loaded = 0;

var onLoaded = function() {
    loaded++;
    if (loaded == toLoad.length) {
        console.log('All scripts loaded!');
    } else {
        console.log('Not all scripts are loaded, waiting...');
    }
}

for (var i = 0, len = toLoad.length; i < len; i++) {
    $.getScript(toLoad[i], onLoaded);
}    

Answer 5

Загрузка нескольких скриптов с помощью $ .getScript () один за другим и выполнение вещи после загрузки всех скриптов

Working Fiddle .Проверьте в окне консоли вывод:

Мы можем создать функцию, которой мы передаем массив путей к файлам js, эта функция будет делать $.getScript() для первого файла js, а при успешном методе она будет вызывать то же самоефункция, передавая второй индекс файла js, и в случае успеха вызовет ту же функцию, передавая третий индекс файла и так далее, пока не загрузит последний файл.Таким образом, в основном это рекурсивная функция, которая выдает обратный вызов, когда все файлы в массиве загружены. Код завершения будет таким простым:

LoadAllScripts("yourArray",function(){
  alert("all scripts loaded!!");
 });

Так что полный код будет выглядеть следующим образом.

 var LoadAllScripts = function (scriptArray, callback) {   
   SyncLoadScript({ scriptArray: scriptArray, index: 0}, function () {
        callback();
    });
};

И SyncLoadScript (core of the logic) выглядит как

 var SyncLoadScript = function (scriptConfig, callback) {
    var $this = this;
    var script = scriptConfig.scriptArray[scriptConfig.index];
    if (scriptConfig.scriptArray.length > scriptConfig.index) {
        if (script.trim().length > 0) {
            $.getScript(script, function () {
                console.log(script);
                SyncLoadScript({ scriptArray: scriptConfig.scriptArray, index: ++scriptConfig.index, element: scriptConfig.element }, callback);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                console.log(script + " failed while loading");
                debugger;
                console.log("Error: "+errorThrown);
                SyncLoadScript({ scriptArray: scriptConfig.scriptArray, index: ++scriptConfig.index, element: scriptConfig.element }, callback);
            });         
        }
        else {
            console.log("invalid script src!!");           
        }
    }
    else {
        callback();
    }
}

Затем вы можете сделать простой вызов LoadAllScripts, передав массив пути к файлу js.как показано ниже.

LoadAllScripts(["1.js","2.js","3.js","4.js"], function () {
    console.log("All the scripts have been loaded.");
    //do your stuff after all the scripts are loaded.
});

Примечание: Я дал вам пустые обратные вызовы для вас, ребята, чтобы настроить и передать любые данные по вашему выбору.probably to hold all the failed scripts that you can passback to the main function and try to reload them again.

Answer 6

Написал это ранее сегодня вечером, но я обещаю, что я не растение. ;-) В дополнение к LabJS и RequireJS, есть также Head.js, который очень прост в использовании и делает именно то, что вы хотите.