Параллельные обратные вызовы AJAX: как их синхронизировать?

Question

Мои приложения нагрузки HTML и JavaScript через AJAX/JSONP, а затем загрузки страниц по ЭТАЛОНОМ пути. Он работает в Iframe, так что это правильный способ поддерживать связь с родителем Рамка (Safari ограничений).

я должен сделать 2 запросы: загрузить JavaScript и HTML для пользовательской страницы. Чтобы быть уверенным, что все будет в порядке, я могу сначала загрузить JavaScript затем HTML (in JavaScript onload callback). Но я хотел бы, чтобы эти два запроса были отправлены одновременно.

Я подготовил код. Сценарий должен называть _finishLoading(), когда оба JavaScript и Загружены файлы HTML. Возможно ли, что функция _finishLoading() не будет выполнена в браузере?

function Loader() 
{ 
     this.load = function() 
     { 
        // ...some code here... 

     var this_ = this; 

     var jsLoaded = false; 
     var htmlLoaded = false; 

     $.ajax(
      url: newUrl, 
      dataType: "jsonp", 
      jsonpCallback: 
       function() 
       { 
        $.ajax(
         url: someUrl, 
         dataType: "html", 
         success: 
          function(data) 
          { 
           $('#' + contentElId).html(data); 

           if(htmlLoaded) 
           { 
            this_._finishLoading() 
           } 

           jsLoaded = true; 
          } 
        ); 
       } 
     ); 

     $.ajax(
      { 
       url: someUrl2, 
       dataType: "html", 
       success: 
        function(data) 
        { 
         $('#' + contentElId).html(data) 

         if(jsLoaded) 
         { 
          this_._finishLoading() 
         } 

         htmlLoaded = true; 
        } 
      } 
     ); 
    } 

}

Update.

Мне нужно загрузить JavaScript, HTML, затем вызвать onload(), чтобы загрузить загруженный Javascript. Если вы знаете более удобный способ, загрузите их отдельно, пожалуйста, дайте мне знать.

Answer 1

Рассмотрим использовать $.when() функцию

код будет выглядеть примерно так:

 var this_ = this; 

     var jsLoaded = false; 
     var htmlLoaded = false; 
     var deferred = $.Deferred(); 
     $.ajax(
      url: newUrl, 
      dataType: "jsonp", 
      jsonpCallback: 
       function() 
       { 
        $.ajax(
         url: someUrl, 
         dataType: "html" 
         success: function(){ 
          deferred.resolve(); 
         } 
        ); 
       } 
     ); 

     var promise2 = $.ajax(
      { 
       url: someUrl2, 
       dataType: "html", 
      } 
     ); 

     $.when(deferred, promise2).done(function(a1, a2){ 
      $('#' + contentElId).html(a1); 
      $('#' + contentElId).html(a2); 
      this_._finishLoading() 
     });