Как дождаться загрузки скриптов, когда у меня есть массив скриптов?

Question

У меня есть массив объектов встроенного языка как таковые:

_externalLibraries = [{name: 'knockout', url: '...'}, { name: 'knockoutValidation', url: '....'}]; 

Затем я попытался написать следующее:

loadLibraries: function() { 
    if (_externalLibraries.length === 0) { 
    return; 
    } 

    _externalLibraries.forEach(function(lib){ 
    // Check if the libraries has been registered as "loaded." 
    var librarysAlreadyLoaded = _loadedLibraries.filter(function(libAlreadyLoaded){ 
     return libAlreadyLoaded.name === lib.name; 
    }); 

    // If it hasn't been loaded. Load it. This allows for mul;tiple widgets to be on the page. 
    // Or this file (for what ever reason) to be called multiple times. 
    console.log(librarysAlreadyLoaded); 
    if (librarysAlreadyLoaded.length === 0) { 
     $.getScript(lib.url, function(){ 
     _loadedLibraries.push({name: lib.name}); 
     }); 
    } 
    }); 
}, 

В основном то, что я пытаюсь сделать, это сказать, загрузить библиотеку в этом массиве, если он еще не загружен. Если он не загрузил его и не добавил имя в массив «загруженных библиотек».

Проблема, по крайней мере, с проверкой нокаута и нокаута заключается в том, что «ko undefined». Как только после загрузки страницы, я могу ввести ko в консоли и посмотреть, что она действительно загружена.

Что я могу изменить или добавить в код, чтобы заставить его сказать «Хорошо, мне нужно дождаться загрузки каждого скрипта в этом массиве». И тогда сделайте то, что еще я хочу сделать.

Answer 1

Вы можете использовать $.when(), Function.prototype.apply()

var _externalLibraries = [{ 
 
    name: "knockout", 
 
    url: "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js" 
 
}, { 
 
    name: "knockoutValidation", 
 
    url: "https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js" 
 
}]; 
 

 
var loadedLibraries = []; 
 

 
$.when.apply($, $.map(_externalLibraries, function(lib) { 
 
    return $.getScript(lib.url, function() { 
 
    loadedLibraries.push(lib.name) 
 
    }) 
 
})) 
 
.then(function() { 
 
    console.log(loadedLibraries, ko, ko.validation) 
 
}, function err(jqxhr, textStatus, errorThrown) { 
 
    console.log(textStatus, errorThrown) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script>