等待，直到Javascript加载一个承诺

Question

我正在构建一个解决方案，根据用户的交互，在不同的时间点将多个Javascript库动态加载到屏幕上。加载库之后，将执行库中的脚本。

例如：

let script1 = '<script class="'+script_class+'" id="' + script_id + '" type="text/javascript" src="' + some_script_url +'"></script>';

$("head").append(script1);
let script2 = '<script class="'+script_class+'" id="' + script_id + '" type="text/javascript" src="' + some_script_url +'"></script>';

$("head").append(script2);
let script3 = '<script class="'+script_class+'" id="' + script_id + '" type="text/javascript" src="' + some_script_url +'"></script>';

$("head").append(script3);

然后一个函数将在脚本中执行一个函数：

function doSomething() {
scriptFunction();
}
doSomething();

问题是，有时在函数尝试执行之前，脚本不会完全加载。这导致了类似于"；scriptFunction未找到"；。在执行脚本之前，如何等待每个库加载？这可以通过承诺来实现吗？

Answer 1

下面是一个函数，它返回一个在加载脚本时解析的promise：

function loadScript(src) {
return new Promise(resolve => {
const script = document.createElement("script");
script.setAttribute("async", "");
script.onload = resolve;
script.setAttribute("src", src);
document.head.appendChild(script);
});
}
const urls = [
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/luxon/3.0.1/luxon.min.js"
];
Promise.all(urls.map(loadScript)).then(ready);
function ready() {
console.log("all loaded");
console.log($.fn.jquery);
console.log(luxon.DateTime.now().toString());
}