map/reduce 및 jQuery를 사용하여 순차적으로 임의의 스크립트를 실행하십시오.

Question

임의의 수의 스크립트를 실행해야합니다. 다음의 것만이 이전에로드되고 실행 된 것만 실행할 수 있습니다. 나는 RequireJS가 (관련) 올바른 선택이 될 것입니다 알고,하지만 난 약속에 대해 배우려고 노력하고있어, 그래서 이것은 내 실험입니다 :

var files = [ 
    'first.js', 
    'second.js', 
    'third.js', 
    'fourth.js' 
]; 

var funcs = files.map(function(file) { 
    return function() { return $.getScript(file); } 
}); 

var deferred = $.Deferred(); 

funcs.reduce(function (soFar, f) { 
    return soFar.then(f); 
}, deferred.resolve(funcs[0])); 

누군가가 내 솔루션에 함정과 대안에 대해 자세히 설명 할 수 있습니까?

Answer 1

당신이 정말 찾고있는 것은 .pipe (또는 1.8 이상에서, 나는 그 때는 같은 것을 의미하는 것으로 변경되었습니다 생각) 한마디로

을, 파이프 방식으로 체인 약속을 허용 할 것이다 당신을 찾고있어. 코드는이 (안된)과 같이 보일 수 있습니다

이

var files, scriptsLoaded; 

files = [ 'first.js', 'second.js', 'third.js', 'fourth.js' ]; 

while(files.length) { 
    (function() { 
     var currentUrl = files.shift(); 

     scriptsLoaded = scriptsLoaded ? 
      scriptsLoaded.pipe(function() { 
       return $.getScript(currentUrl); 
      }) : 
      $.getScript(currentUrl); 
    }()); 
} 

$.when(scriptsLoaded).done(function() { 
    // All scripts are now loaded assuming none of them failed 
}); 

** 당신이 제공하는 링크로 편집 **

, 당신이 달성하려고 한 것을 이해합니다. 다음은 몇 가지 의견이있는 해결책의 수정 된 버전입니다. 다른 솔루션과 동일한 작업을 수행하지만 훨씬 간결한 버전입니다.

var files = [ 'first.js', 'second.js', 'third.js', 'fourth.js' ]; 

// The initial value provided to the reduce function is a promise 
// that will resolve when the first file has been loaded. For each 
// of the remaining file names in the array, pipe it through that first 
// promise so that the files are loaded in sequence (chained). 
// The value that is returned from the reduce function is a promise 
// that will resolve only when the entire chain is done loading. 
var scriptsLoaded = files.slice(1).reduce(function (soFar, file) { 
    return soFar.pipe(function() { 
     return $.getScript(file); 
    }); 
}, $.getScript(files[0]);