使用顺序回调自动加载javascript文件

我有下面的javascript列表，该列表中的每个项目都有一个脚本文件url和一个回调函数，我要做的是遍历该列表，加载每个脚本，然后执行回调函数，并且不移动到下一个项目，除非执行完当前回调

var data = { 
    scripts: [
        {
            file    : 'some-script.js',
            callback: function() {
                // do some code here
            },
        },
        {
            file    : 'another-script.js',
            callback: function() {
                // do some code here
            },
        },
        ...
    ]
};

---

如果可能，如何自动执行此操作？

如果每个脚本中都有可以测试的符号，或者每个脚本在加载完成后都可以执行函数调用，则可能

加载脚本很容易，我相信您知道：

var script = document.createElement('script');
script.src = /* ... the source path ... */;
document.body.appendChild(script);

（你会看到人们在

头部

后面附加内容；这无关紧要，而且

身体

很容易找到。）

但最困难的是知道它何时被下载和执行。唯一真正做到这一点的方法是轮询脚本定义的新全局符号是否已定义，或者让脚本在加载完成后主动回调（a'la）

无论哪种方式，一旦检测到符号或得到回调，就可以继续加载下一个脚本

下面是一个基于查找全局符号（

窗口

对象上的属性）的快速而肮脏的草图：

//要加载的脚本
var scriptList={
脚本：[
{
文件：“some script.js”，
回调：函数（）{
//在这里做一些代码
},
符号：“someSymbol”，
超时：30000//我们知道这一个很慢，给它30秒
},
{
文件：“另一个脚本.js”，
回调：函数（）{
//在这里做一些代码
},
符号：“另一个符号”
},
// ...
]
};
//触发负载
加载脚本（脚本列表）；
//执行加载的库例程
函数加载脚本（列表）
{
var指数，超时；
//从第一个开始（loadNextScript以增量开始）
指数=-1；
loadNextScript（）；
//此函数用于加载列表中的下一个脚本；如果没有
//而且，它只是返回
函数loadNextScript（）
{
var脚本；
//还有吗？
++指数；
如果（索引<列表长度）
{
//是，附加一个'script'元素
script=document.createElement（'script'）；
script.src=list.file；
document.body.appendChild（脚本）；
//确定何时超时
timeout=new Date（）+（列表[index].timeout | | 20000）；//以Xms为单位超时，默认为20秒
//开始轮询
setTimeout（pollForScript，0）；//异步，但几乎立即（在大多数浏览器上为4-10ms）
}
}
//此函数轮询当前脚本是否已由加载
//正在检查它定义的全局符号。
函数pollForScript（）
{
var结果；
//时间太长了吗？
如果（新日期（）>超时）
{
//对
结果=“超时”；
}
其他的
{
//符号是否已定义？
if（窗口类型[列表[索引].symbol]！=“未定义”）
{
//对
结果=“加载”；
}
其他的
{
//不，继续等
setTimeout（pollForScript，250）；//每四分之一秒检查一次
}
}
//我们得到结果了吗？
如果（结果）
{
//是的，回拨会告诉它结果吗
试一试{
列表[索引]。回调（结果）；
}
捕获（e）{
}
//加载下一个脚本
loadNextScript（）；
}
}
}

如果每个脚本中都有一个可以测试的符号，或者每个脚本在加载完成后都可以执行函数调用，则有可能

加载脚本很容易，我相信您知道：

var script = document.createElement('script');
script.src = /* ... the source path ... */;
document.body.appendChild(script);

（你会看到人们在

头部

后面附加内容；这无关紧要，而且

身体

很容易找到。）

但最困难的是知道它何时被下载和执行。唯一真正做到这一点的方法是轮询脚本定义的新全局符号是否已定义，或者让脚本在加载完成后主动回调（a'la）

无论哪种方式，一旦检测到符号或得到回调，就可以继续加载下一个脚本

下面是一个基于查找全局符号（

窗口

对象上的属性）的快速而肮脏的草图：

//要加载的脚本
var scriptList={
脚本：[
{
文件：“some script.js”，
回调：函数（）{
//在这里做一些代码
},
符号：“someSymbol”，
超时：30000//我们知道这一个很慢，给它30秒
},
{
文件：“另一个脚本.js”，
回调：函数（）{
//在这里做一些代码
},
符号：“另一个符号”
},
// ...
]
};
//触发负载
加载脚本（脚本列表）；
//执行加载的库例程
函数加载脚本（列表）
{
var指数，超时；
//从第一个开始（loadNextScript以增量开始）
指数=-1；
loadNextScript（）；
//此函数用于加载列表中的下一个脚本；如果没有
//而且，它只是返回
函数loadNextScript（）
{
var脚本；
//还有吗？
++指数；
如果（索引<列表长度）
{
//是，附加一个'script'元素
script=document.createElement（'script'）；
script.src=list.file；
document.body.appendChild（脚本）；
//确定何时超时
超时
var data = { 
    scripts: [
        {
            file    : 'some-script.js',
            callback: function() {
                // do some code here
            },
        },
        {
            file    : 'another-script.js',
            callback: function() {
                // do some code here
            },
        },
        ...
    ]
};


$(document).ready(function() {

    if(data.scripts.length > 0) {
        scriptLoader(0);
    }

});

function scriptLoader(i) {


    var currScript = data.scripts[i];


    $.getScript(currScript.file, function() {

      // execute your callback
      currScript.callback();

      // load next script
      if(i < data.scripts.length) {
        scriptLoader(i++);
      }

    });

}

    function include_js(url, callback) {  // http://www.nczonline.net
        var script = document.createElement("script");
        script.type = "text/javascript";

        if (script.readyState) {  //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" || script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {  //Others
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }

//Edit

    for (var i = 0; i < data.scripts.length; i++) {
         include_js(data.scripts[i].file, data.scripts[i].callback);
    }