jQuery 지연 객체 및 순서대로 실행 함수

Question

$ .ajax를 사용하여 css/js/jst (자바 스크립트 템플릿)을로드하는이 코드가 있는데 요청 후 요청을 실행하도록하고 싶습니다. 시간을 비동기 적으로 수행합니다.

var getStuff = function(resources, progressCallback, errorCallback, successCallback, doneCallback){ 

    var deferreds = []; 
    var deferreds_progressCallback = []; 
    var len = resources.length; 

    for(var idx = 0; idx < len; idx++){ 

    var resource = resources[idx]; 

    var dfd = jQuery.Deferred(function(self){ 
     self.notify(resource); 
     (function(resource){ 
     jQuery.ajax({ 
      cache: false, 
      url: resource, 
      dataType: 'text', 
      error: function(xhr, status, error){ 
      self.reject(resource); 
      }, 
      success: function(data, status, xhr){ 
      if(typeof(data) != 'string'){ 
       console.log(typeof(data)); 
      } 
      if(resource.match(/.css$/)){ 
       $('head').append("<style type='text/css'>" + data + "</style>"); 
      }else if(resource.match(/.jst$/)){ 
       var templates_div = jQuery("<div style='display:none;'></div>").appendTo('body'); 
       templates_div.append(data); 
      }else if(resource.match(/.js$/)){ 
       jQuery.globalEval(data); 
      } 
      self.resolve(resource); 
      } 
     }); 
     })(resource); 
    }); 

    deferreds.push(dfd); 
    deferreds_progressCallback.push(resource); 

    } 

    deferreds.reverse(); 
    deferreds_progressCallback.reverse(); 

    (function iterateWhen(){ 
    if(len--){ 
     jQuery.when(deferreds[len]) 
     .then(function(resource){ 
     successCallback(resource); 
      iterateWhen(); 
     }) 
     .fail(function(resource){ 
     errorCallback(resource); 
     }) 
     .progress(function(resource){ 
     progressCallback(resource); 
     }); 
    }else{ 
     doneCallback && doneCallback(); 
    } 
    }()); 

} 

바로 지금이 코드는 시작할 때 모든 요청을 실행합니다. deferred.resolve()가 호출 될 때까지 기다릴 것이지만 iterateWhen() 루프가 지연 []을 반복하기 시작할 때까지 기다리지 않습니다.

jQuery 문서에 따르면 $ .Deferred()는 선택적 인수로 함수를 허용하고 생성자에서 반환하기 전에 해당 함수를 실행하므로 문제가 발생하지만이를 수행 할 솔루션을 알지 못합니다. 내가 원하는거야.

감사합니다.

function getStuff(resources, progressCallback, errorCallback, successCallback, doneCallback){ 

    function inject(resource){ 
    var dfd = jQuery.Deferred(); 
    dfd.notify(resource); 

    jQuery.ajax({ 
     cache: false, 
     url: resource, 
     dataType: 'text', 
     error: function(xhr, status, error){ 
     dfd.reject(resource); 
     }, 
     success: function(data, status, xhr){ 
     if(resource.match(/.css$/)){ 
      $('head').append("<style type='text/css'>" + data + "</style>"); 
     }else if(resource.match(/.jst$/)){ 
      $('body').append("<div style='display:none;'>" + data + "</div>"); 
     }else if(resource.match(/.js$/)){ 
      jQuery.globalEval(data); 
     } 
     dfd.resolve(resource); 
     } 
    }); 

    return dfd; 
    }; 

    var len = resources.length; 
    resources.reverse(); 

    (function iterateWhen(){ 
    if(len--){ 
     inject(resources[len]) 
     .then(function(resource){ 
     successCallback && successCallback(resource); 
     iterateWhen(); 
     }) 
     .fail(function(resource){ 
     errorCallback && errorCallback(resource); 
     }) 
     .progress(function(resource){ 
     progressCallback && progressCallback(resource); 
     }); 
    }else{ 
     doneCallback && doneCallback(); 
    } 
    }()); 

} 

그래서 그냥 같이 호출해야합니다 :

getStuff([ 

    /*Load .JS, .JST and .CSS files*/ 
    /*Only same-domain request!*/ 
    'foo/bar.js', 
    'bar/foo.css' 

], function(resource){ /*Progress callback*/ 

    console.log("Loading " + resource); 

}, function(resource){ /*Errors callback*/ 

    console.log("Error while loading " + resource); 

}, function(resource){ /*OK callback*/ 

    console.log("Loaded " + resource); 

}, function(){ 

    console.log("Finished loading .js, .jst and .css files!"); 

}); 

감사

Answer 1

나는 마지막으로 이런 식으로했다!