Правильный способ асинхронного получения нескольких сценариев с использованием Jquery с обратным вызовом, готовым к использованию после документа

Question

Я планирую получать несколько файлов JS с моего сервера асинхронно во время загрузки страницы.Мне известна функция Jquery «getScript», но она получает только 1 скрипт.Есть ли способ указать обратный вызов, который будет выполнен, когда пакет сценариев был получен с сервера?

Я думал о том, чтобы сделать что-то вроде этого:

$.getScript(script1, function() {
$.getScript(script2, function() {
$.getScript(script3, function() {
...
...
});});....});

Но это загружает сценарии последовательно, и я хотел бы, чтобы запросы выполнялись параллельно.В качестве более общего вопроса, который заменяет этот, каков наилучший способ загрузки N ресурсов (CSS, изображений, скриптов и т. Д.), Асинхронно указывающий один обратный вызов, который будет выполнен, когда все ресурсы были загружены?Обновление: в дополнение к этому мне нужно выполнить обратный вызов после того, как документ будет готов (сигнализируется событием $ (document) .ready).Есть ли способ достичь этого?

Answer 1

Вам нужно вызывать getScript 3 раза подряд, передавая обратный вызов, который увеличивает счетчик и вызывает реальный обратный вызов, если счетчик равен 3.

Вы можете сделать простую функцию-обертку длясделать это:

function getScripts(names, callback) {
    var received = 0;
    var realCallback = function() { 
        received++;
        if (received === names.length)
            $(callback);
    };

    for (var i = 0; i < names.length; i++)
        $.getScript(names[i], realCallback);
}

(отредактировано для вызова обратного вызова, когда документ готов)

Вы можете назвать его так:

getScripts([ "script1", "script2", "script3" ], function() { ... });

Answer 2

Я использую async.js , чтобы сделать это:

async.map(scripts, $.getScript, function () {
    // called after all have completed...
});

Answer 3

var _couter=0;
var _calledScripts=0;
function _loadScripts(arrayOfScripts,_callBackFunction)
{
   _counter=arrayOfScripts.length;
   _calledScripts=0;
    jQuery.each(arrayOfScripts,function(index,item){
            jQuery.getScript(item, function(){
                _calledScripts++;
                if(_calledScripts==_couter)
                 {
                     _callBackFunction() 
                 }
             });
    });
}

Answer 4

1. Инициализируйте переменную counter с количеством ресурсов, которые нужно получить.
2. Используйте один и тот же обратный вызов для каждой асинхронной операции.
3. Этот обратный вызов должен уменьшить counter и проверитьэто ценность.Как только он достигнет нуля, он должен вызвать код, который будет запущен при завершении.