Question

我计划在页面加载时异步从我的服务器获取几个JS文件。我知道Jquery函数“getScript”，但这只能得到1个脚本。有什么方法可以指定从服务器获取一批脚本时要执行的回调吗？

我想过做这样的事情：

$.getScript(script1, function() {
$.getScript(script2, function() {
$.getScript(script3, function() {
...
...
});});....});

但是这会按顺序加载脚本，我希望这些请求可以并行完成。

作为一个更普遍的问题取代了这个问题，加载N个资源（CSS，图像，脚本等）的最佳方法是异步指定在加载所有资源时要执行的单个回调吗？

更新：除此之外，我需要在文档准备好后执行回调（由$（document）.ready事件发出信号）。有什么办法实现这个目标吗？

Answer 1

您需要连续3次调用getScript，传递一个回调，该回调会增加一个计数器并在计数器为3时调用真正的回调。

您可以创建一个简单的包装函数来执行此操作：

function getScripts(names, callback) {
    var received = 0;
    var realCallback = function() { 
        received++;
        if (received === names.length)
            $(callback);
    };

    for (var i = 0; i < names.length; i++)
        $.getScript(names[i], realCallback);
}

（编辑在文档准备好时调用回调）

您可以这样称呼它：

getScripts([ "script1", "script2", "script3" ], function() { ... });

Answer 2

初始化一个counter变量，其中包含要获取的资源数。
对每个异步操作使用相同的回调。
此回调应减少counter并检查其值。一旦它变为零，它应该调用在完成时触发的代码。

Answer 3

var _couter=0;
var _calledScripts=0;
function _loadScripts(arrayOfScripts,_callBackFunction)
{
   _counter=arrayOfScripts.length;
   _calledScripts=0;
    jQuery.each(arrayOfScripts,function(index,item){
            jQuery.getScript(item, function(){
                _calledScripts++;
                if(_calledScripts==_couter)
                 {
                     _callBackFunction() 
                 }
             });
    });
}

Answer 4

我使用async.js来做这些事情：

async.map(scripts, $.getScript, function () {
    // called after all have completed...
});

使用Jquery和文档后回调来异步获取多个脚本的正确方法

4 个答案: