首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >按一定顺序加载多个脚本

按一定顺序加载多个脚本
EN

Stack Overflow用户
提问于 2018-06-07 06:27:04
回答 2查看 146关注 0票数 2

我需要按照一定的顺序加载几个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举例。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-07 06:30:46

是!的确有。使用Promisesasync/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'))
票数 3
EN

Stack Overflow用户

发布于 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);
    }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50730500

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档