正確的方式獲取幾個腳本異步使用JQuery與後文檔就緒回調

我打算從頁面加載時從我的服務器異步獲取幾個JS文件。我知道Jquery函數「getScript」，但是這隻能得到1個腳本。當從服務器獲取一批腳本時，是否有任何指定要執行的回調的方法？正確的方式獲取幾個腳本異步使用JQuery與後文檔就緒回調

我想過做這樣的事情：

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

但這加載腳本序列，和我想的請求，以並行方式執行。

作爲一個更普遍的問題，取代這一個，加載N資源（CSS，圖像，腳本等）的異步指定一個單一的回調，當所有的資源已被加載執行的最佳方式是什麼？

更新：除此之外，我需要在文檔準備就緒後執行回調（由$（document）.ready事件發出信號）。任何方式來實現這一點？

來源

2010-09-21 Diego

你需要調用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() { ... });

來源

2010-09-21 18:14:43 SLaks

這可以通過使用'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並檢查其值。一旦達到零，它應該調用完成時觸發的代碼。

來源

2010-09-21 18:14:00

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

來源

2010-09-21 18:33:05

我用async.js做這個東西：

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

來源

2010-09-22 11:31:45 Caolan

正確的方式獲取幾個腳本異步使用JQuery與後文檔就緒回調

回答

相關問題