正确的方式获取几个脚本异步使用JQuery与后文档就绪回调

问题描述：

我打算从页面加载时从我的服务器异步获取几个JS文件。我知道Jquery函数“getScript”，但是这只能得到1个脚本。当从服务器获取一批脚本时，是否有任何指定要执行的回调的方法？正确的方式获取几个脚本异步使用JQuery与后文档就绪回调

我想过做这样的事情：

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

但这加载脚本序列，和我想的请求，以并行方式执行。

作为一个更普遍的问题，取代这一个，加载N资源（CSS，图像，脚本等）的异步指定一个单一的回调，当所有的资源已被加载执行的最佳方式是什么？

更新：除此之外，我需要在文档准备就绪后执行回调（由$（document）.ready事件发出信号）。任何方式来实现这一点？

答

你需要调用getScript 3次在一排，通过该计数器加一，如果计数器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() { ... });

这可以通过使用'names.pop'（或'names.shift'）去除计数器并检查数组长度是否为0来简化，而不是跟踪计数器。 – 2010-09-21 18:21:05

@Ryan：这会稍微简单一点，但是（稍微）慢些。另外，这意味着调用者不能重用数组。（这是不太可能的） – SLaks 2010-09-21 18:24:57

这看起来不错，善于使用闭包:) 我正面临着某种相关的问题。我需要能够确定哪个回调和$（document）.ready先执行。事情是我只需要在所有脚本加载（并执行）并且DOM已经完全解析的情况下执行代码。我会更新这个问题来反映这一点。 – Diego 2010-09-21 18:27:37

答

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

答

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() 
       } 
      }); 
    }); 
}

答

我用async.js做这个东西：

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

正确的方式获取几个脚本异步使用JQuery与后文档就绪回调

相关推荐