我需要按照一定的顺序加载几个js脚本。实际上我是用typescript写的,我不能用jQuery,只能用纯ts/js。我现在所拥有的是:
var script1 = document.createElement('script');
script1.type = 'text/javascript';
script1.src = 'script1.js';
document.head.appendChild(script1);
script1.onload = function () {
var script2 = document.createElement('script');
script2.type = 'text/javascript';
script2.src = 'script2.js';
document.head.appendChild(script2);
script2.onload = function () {
etc...
}
}
它是有效的,但我相信有更优雅的方式可以做到这一点?请用普通的javascript或typescript举例。
发布于 2018-06-07 06:30:46
是!的确有。使用Promises
和async/await
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
document.head.appendChild(script)
script.onload = () => resolve()
})
}
async function loadScripts() {
await loadScript('script1.js')
await loadScript('script2.js')
// ..
}
loadScripts().then(_ => console.log('All scripts loaded in specified order'))
发布于 2018-06-07 06:33:30
一种更优雅的方式可能是类似下面的代码,其中您首先定义所有内容,但仍然按照上面的顺序加载所有内容。这使用了一个辅助函数来追加,然后设置下一个脚本的加载函数,并将脚本引用存储在一个数组中以简化此过程。
/*
* Load the scripts in a specific order
*/
function loadScripts() {
var scripts = [];
var numScripts = 2
for (let i=0; i<numScripts, i++) {
scripts[i] = document.createElement('script');
scripts[i].type = 'text/javascript';
scripts[i].src = '"script"+i+".js"; //NOTE: if your scripts start on 1, not 0, you need "i+i"
}
loadScriptHelper(scripts,0);
}
/*
* Helper function for load scripts
*/
function loadScriptHelper(scripts,i) {
document.head.appendChild(scripts[i]);
scripts[i].onload = function() {
loadScriptHelper(scripts,i+1);
}
}
https://stackoverflow.com/questions/50730500
复制相似问题