我需要添加原型，然后添加 scriptaculous 并在它们都完成加载后获得回调。我目前正在像这样加载原型：
var script = document.createElement("script");
script.src = "http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js";
script.onload = script.onreadystatechange = callback;
document.body.appendChild( script );
我可以通过链接回调来做到这一点，但这似乎是一种糟糕的做法（当我需要加载更多脚本时，我不想要一个由 20 个回调方法组成的愚蠢链）。想法？
我建议你使用一些小型装载机，它会为你链接和做一些事情。例如像这样一个：
function loadScripts(array,callback){
var loader = function(src,handler){
var script = document.createElement("script");
script.src = src;
script.onload = script.onreadystatechange = function(){
script.onreadystatechange = script.onload = null;
handler();
}
var head = document.getElementsByTagName("head")[0];
(head || document.body).appendChild( script );
};
(function run(){
if(array.length!=0){
loader(array.shift(), run);
}else{
callback && callback();
}
})();
}
此脚本应该可以帮助您构建脚本标签并在加载所有文件时调用您的回调。调用非常简单：
loadScripts([
"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js",
"http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"
],function(){
alert('All things are loaded');
});
希望这会有所帮助
由于 Internet Explorer 中的错误，nemisj 的递归加载程序在 IE 中无法正常工作。可以通过在递归调用上设置延迟来解决，例如：
function loadScripts(array,callback){
var loader = function(src,handler){
var script = document.createElement("script");
script.src = src;
script.onload = script.onreadystatechange = function(){
script.onreadystatechange = script.onload = null;
if(/MSIE ([6-9]+\.\d+);/.test(navigator.userAgent))window.setTimeout(function(){handler();},8,this);
else handler();
}
var head = document.getElementsByTagName("head")[0];
(head || document.body).appendChild( script );
};
(function(){
if(array.length!=0){
loader(array.shift(),arguments.callee);
}else{
callback && callback();
}
})();
}
这个小小的 hack 做到了，通常是 IE 中的解决方案，当出现无法解释的问题时，这种情况太频繁了。
由于 scriptaculous 需要原型，因此您必须使用用于加载这些脚本的任何方法链接侦听器。
有多种脚本加载器可用于以尽可能快的速度并行加载脚本，例如LABjs，但在这种情况下，没有一个能提供多大帮助。
如果您最终要加载 10-20 个脚本，我建议您使用诸如Combiner 之类的工具预先组合脚本。
您可以Promise脚本 .onload和.onerror回调，然后用于Promise.all等待所有Promise解决，然后再继续依赖于这些脚本的执行。
下面是一个例子：
const loadScript = url =>
new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = url;
script.onload = resolve;
script.onerror = e =>
reject(Error(`${url} failed to load`))
;
document.head.appendChild(script);
})
;
const scriptURLs = [
"https://unpkg.com/htm",
"https://unpkg.com/axios@0.21.0/dist/axios.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/d3/6.3.1/d3.min.js",
// ...
];
Promise.all(scriptURLs.map(loadScript))
.then(async () => {
/* Use your scripts here */
console.log("proving scripts loaded:");
axios.get("http://jsonplaceholder.typicode.com/users");
console.log(d3.csvParse("a,b\n3,4\n5,6"));
const html = htm.bind((t, p, ...c) => ({t, p, c}));
console.log(html`<h1 id=hello>Hello world!</h1>`);
})
.catch(err => console.error(err))
;