jQuery Deferred : $ .when() 여러 객체 사용

Question

콜백을 사용하여 다른 스크립트를 가져 오는 메소드가 필요합니다. 이 방법은 작품을 좋아 :

fetchScripts:function() { 
    var _this=this; 
    $.when(
     $.ajax({ 
      url:_this.url + 'library/script-one.js', 
      type:'get', 
      cache:true 
     }), 
     $.ajax({ 
      url:_this.url + 'library/script-two.js', 
      type:'get', 
      cache:true 
     }), 
     { .... }, 
     $.ajax({ 
      url:_this.url + 'library/script-n.js', 
      type:'get', 
      cache:true 
     }) 
    ).then(function() { 
     console.log('fetch is done'); 

    }) 
}, 

하지만 redundany가 증가하고 있기 때문에 더 많은 방법을 일반화하고 싶습니다. $ .when()에 약속을 전달할 수 있습니까? 내 첫 번째 시도 아래 -하지만 URL이 항상 동일, 즉 '스크립트 n.js' 아마 내가 요점을 놓친 당신은 당신은 여전히 ​​$ .when 필요

fetchScripts:function() { 
    this.deferred=new $.Deferred(); 
    this.promise=this.deferred.promise(); 
    var _this=this; 
    $.each([ 
     'script-one.js', 
     'script-two.js', 
     (....), 
     'script-n.js' 
    ],function() { 
     _this.script=this; 
     _this.promise.then(function(){ 
      return $.ajax({ 
       url:_this.url + 'library/' + _this.script, 
       type:'get', 
       cache:true 
      }) 
     }); 
    }); 
    $.when(
     this.promise 
    ).then(function() { 
     console.log('fetch is done'); 

    }); 
    this.deferred.resolve(); 
}, 

Answer 1

보다 "아름다움"솔루션을 설명 할 수 . 하지만 그 대신, Deferreds (또는 약속)의 배열을 만든 다음 apply 그것은 $ .when에 :

이

fetchScripts:function() { 
    var base = this.url; 
    var defaults = { 
     type:'get', 
     cache:true 
    }; 

    var libraries = [ 
     'library/script-one.js', 
     'library/script-two.js', 
     'library/script-n.js' 
    ]; 

    var deferreds = $.map(libraries, function(current) { 
     var ajaxOptions = $.extend({ url: base + current }, defaults); 
     return $.ajax(ajaxOptions); 
    }); 

    $.when.apply($, deferreds).then(function() { 
     console.log('All done'); 
    }); 
} 

또는 기본 설정을 확장에, 당신은 단지 $.ajax(defaults)를 사용할 수 있습니다.

Answer 2

fetchScripts: function() { 
    var deferred = new $.Deferred(); 
    var _this=this; 

    var promises = $.map([ 
     'script-one.js', 
     'script-two.js', 
     (....), 
     'script-n.js' 
    ], function(item, idx) { 
     return $.ajax({ 
      url:_this.url + 'library/' + item.script, 
      type:'get', 
      cache:true 
     }) 
    }); 

    $.when.apply($, promises).then(function() { 
     console.log('fetch is done'); 
     deferred.resolve() 
    }); 
    return deferred.promise(); 
}