크로스 도메인이 완벽하게 작동하는 Ajax에 의해 성공적으로로드 된 후 실제로 실행되지 않는 스크립트의 동일한 도메인 핫로드로 하나 이상의 문제를 발생시키는 다중 스크립트로드와 관련된 여러 문제가 발생했습니다! 🙁

원래 질문에 선택된 답변이 안정적으로 작동하지 않습니다.

여러 번 반복 한 후에는 getScript에 대한 최종 답변이며 스크립트 당로드 된 콜백 옵션 및 완료시 전체 콜백과 함께 특정 엄격한 순서로 여러 스크립트를 비동기 적으로로드합니다 .jQuery 2.1 이상 및 최신 버전의 Chrome에서 테스트되었습니다. 버려진 Internet Explorer.

내 테스트 사례는 THREE.JS webGL 렌더 파일을로드 한 다음 onComplete에 대한 익명 함수 호출에 전달 된 간격 검사를 사용하여 THREE 전역을 사용할 수있을 때 렌더 스크립트를 시작했습니다.

프로토 타입 함수 (getScripts)

function getScripts( scripts, onScript, onComplete )
{
    this.async = true;
    this.cache = false;
    this.data = null;
    this.complete = function () { $.scriptHandler.loaded(); };
    this.scripts = scripts;
    this.onScript = onScript;
    this.onComplete = onComplete;
    this.total = scripts.length;
    this.progress = 0;
};

getScripts.prototype.fetch = function() {
    $.scriptHandler = this;
    var src = this.scripts[ this.progress ];
    console.log('%cFetching %s','color:#ffbc2e;', src);

    $.ajax({
        crossDomain:true,
        async:this.async,
        cache:this.cache,
        type:'GET',
        url: src,
        data:this.data,
        statusCode: {
            200: this.complete
        },
        dataType:'script'
    });
};

getScripts.prototype.loaded = function () {
    this.progress++;
    if( this.progress >= this.total ) {
        if(this.onComplete) this.onComplete();
    } else {
        this.fetch();
    };
    if(this.onScript) this.onScript();
};

사용하는 방법

var scripts = new getScripts(
    ['script1.js','script2.js','script.js'],
    function() {
        /* Optional - Executed each time a script has loaded (Use for Progress updates?) */
    },
    function () {
        /* Optional - Executed when the entire list of scripts has been loaded */
    }
);
scripts.fetch();

이 기능은 Deferred (Deprecated now?), When, Success & Complete in Trials를 100 % 신뢰할 수 없습니다!?를 사용하여 찾은 것과 동일합니다.

원하는 경우 오류 / 실패 처리 동작을 추가 할 수 있습니다.

답변

function loadScripts(scripts) {
  scripts.forEach(function (item, i) {
    item = $.getScript(item);
  });
  return $.when.apply($, scripts);
}

loadScripts(['path/to/script-a.js', 'path/to/script-b.js']).done(function (respA, respB) {
    // both scripts are loaded; do something funny
});