JavaScript 스크립트를 순서대로로드 중

Question

JavaScript $ ajax를 비동기 방식으로 사용하여 몇 개의 스크립트를로드하고 있습니다. 특정 순서로로드해야하지만 순간에는 무작위입니다.

내가 가진 코드는 다음과 같습니다

loadScripts(); 

function loadScripts() { 
    getBootStrapperScript(function (callback) {    
     alert('bootStrapper loaded'); 
    }) 

    getXMLScript(function (callback) {  
     alert('xml script loaded'); 
    }); 

    getFormScript(function (callback) {  
     alert('form script loaded'); 
    });  
} 

function getBootStrapperScript(callback) { 
    $.ajax({ 
     url: "http://localhost/eSales/scripts/bootStrapper.js", 
     dataType: "script" 
    }).done(callback); 
} 

function getXMLScript(callback) { 
    $.ajax({ 
     url: "http://localhost/eSales/scripts/LoadXML.js", 
     dataType: "script" 
    }).done(callback); 
} 

function getFormScript(callback) { 
    $.ajax({ 
     url: "http://localhost/eSales/scripts/LoadForm.js", 
     dataType: "script" 
    }).done(callback); 
} 

당신은 그들이 정의 된 순서대로 스크립트 부하를 보장하는 좋은 우아한 방법이 있나요는이 jsFIddle

에서 실행 볼 수 있습니까?

Answer 1

$.getScript()는 jQuery를 연기 객체를 반환 here

Answer 2

함수를 미리 정의한 다음 콜백으로 전달하여 차례대로 실행하십시오. 이는 다음에 전달하기 전에 각각로드해야하기 때문에 작동합니다. 응답 시간이 더 이상 문제가되지 않기 때문입니다.

Answer 3

당신은 특정 순서를 보장하기 위해 다른

getBootStrapperScript(function (callback) {    
    alert('bootStrapper loaded'); 
    getFormScript(function (callback) {  
     alert('form script loaded'); 
    }); 
}) 

Answer 4

당신은 콜백 내부를로드 할 수의 콜백의 다음 아약스 함수를 호출 할 수 있습니다. 이 더러워 보이지만 당신이 할 수있는 일

는

function loadScripts() { 
    getBootStrapperScript(function (callback) {    
    alert('bootStrapper loaded'); 
    getXMLScript(function (callback) {  
     alert('xml script loaded'); 
     getFormScript(function (callback) {  
     alert('form script loaded'); 
     });  
    }); 
    }) 
} 

Answer 5

이 완료로 변수에 각 호출을 할당 한 다음 같은 것을 할 것입니다 :

var script1, script2, script3; 

var init = function() { 

    if (script1 && script2 && script3) 
    { 
     // now inject scripts in order 
    } 

}; 

function getBootStrapperScript(callback) { 
    $.ajax({ 
     url: "http://localhost/eSales/scripts/bootStrapper.js", 
     dataType: "script" 
    }).done(function(data) { 
     script1 = data; 
     init(); 
    }); 
} 

// Do your other two calls in similar fashion 

무엇이 일어날 것은 그 초기화() 모든 스크립트 변수가 할당 된 경우에만 if 문을 실행 한 다음 페이지에 삽입되는 순서를 선택할 수 있습니다.

편집 : 가독성과 성능이 떨어 지므로 다른 답변과 마찬가지로 전화를 연결하는 것이 좋습니다.

EDIT2 : 스크립트가 메모리에 순차적으로로드된다는 요구 사항은 서버에서 순차적으로 가져 오는 것이 아닙니다. 당신이 그렇게

$.getScript("firstScript").done(function() { 
    $.getScript("secondScript").done(function() { 
     $.getScript("thirdScript").done(function() { 
      alert("scripts loaded"); 
     }); 
    }); 
}); 

바이올린처럼 사용할 수 있도록

Answer 6

function loadScripts(urls, callback) { 
    var i = 0; 
    (function loadNextScript() { 
     if (i < urls.length) { 
       $.getScript(urls[i][0]).done(function() { 
        alert(urls[i][1] + " loaded"); // probably remove in production 
        ++i; 
        loadNextScript(); 
       }); 
     } 
     else if (callback) callback(); 
    })(); 
} 

loadScripts([ 
    ["http://localhost/eSales/scripts/bootStrapper.js", "bootstrapper script"], 
    ["http://localhost/eSales/scripts/LoadXML.js", "xml script"], 
    ["http://localhost/eSales/scripts/LoadForm.js", "form script"] 
], function() { alert('done'); });