पोस्ट-दस्तावेज़-तैयार कॉलबैक

Question

के साथ Jquery का उपयोग करके असीमित रूप से कई स्क्रिप्ट प्राप्त करने का उचित तरीका पृष्ठ लोड होने पर मैं अपने सर्वर से असीमित रूप से कई जेएस फ़ाइलों को प्राप्त करने की योजना बना रहा हूं। मुझे Jquery फ़ंक्शन "getScript" के बारे में पता है, लेकिन यह केवल 1 स्क्रिप्ट प्राप्त करता है। क्या सर्वर से स्क्रिप्ट का बैच प्राप्त होने पर कॉलबैक को निष्पादित करने का कोई तरीका है?

मैं कुछ इस तरह कर रही है के बारे में सोचा:

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

लेकिन इस क्रम में स्क्रिप्ट को लोड करता है, और मैं चाहता हूँ अनुरोध समानांतर में किया जाना।

एक सामान्य प्रश्न के रूप में जो इसे बेहतर करता है, एन संसाधनों (सीएसएस, छवियों, स्क्रिप्ट्स इत्यादि) को लोड करने का सबसे अच्छा तरीका क्या है, सभी संसाधनों को लोड होने पर निष्पादित करने के लिए एक कॉलबैक निर्दिष्ट किया जाता है?

अपडेट: इसके अलावा, मुझे दस्तावेज़ तैयार होने के बाद कॉलबैक निष्पादित करने की आवश्यकता है ($ (दस्तावेज़) .ready ईवेंट द्वारा संकेतित)। इसे प्राप्त करने का कोई तरीका?

Answer 1

आप एक पंक्ति में 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() { ... }); 

Answer 2

1. counter प्रारंभिक संसाधनों की संख्या के साथ परिवर्तनीय आरंभ करें।
2. प्रत्येक एसिंक्रोनस ऑपरेशन के लिए एक ही कॉलबैक का उपयोग करें।
3. यह कॉलबैक 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... 
});