メソッドの実行時にjQueryを使用して別の関数を完了するまでの遅延実行

Question

プラグインjstreeからjQuery関数の実行を遅延させようとしましたが、別の関数（対象のhtml idを置き換えます）しかし、以下のスクリプトは正しく動作していないようです。

考えられるのは、loadxml（）関数がHTMLツリーにデータを埋め込み、jstree（）関数を実行してツリービューを適用させるという考え方です。ここ

はHTML

 <div id="jstree" class= "col-md-6 col-xs-6"></div> 

スクリプト

  $.when(loadxml()).then(function(){ 

       $('#jstree').jstree(); 

      }); 



function loadxml(){ 

$.ajax({ 

    url: "xml/categories.xml", 
    dataType: "xml", 
    success: function(catxml){ 
     var categories = new Array(); 
     var outputDisplay = ""; 

     $(catxml).find("Categories").each(function(){ 
      var cid = $(this).find("CategoryID").text(); 
      var cname = $(this).find("CategoryName").text(); 
      var cdescription = $(this).find("Description").text(); 

      categories.push([cid,cname,cdescription]); 
     }); 

     $.ajax({ 
      url: "xml/products.xml", 
      dataType: "xml", 
      success: function(prodxml){ 

       var products = new Array(); 

       $(prodxml).find("Products").each(function(){ 
        var pid = $(this).find("ProductID").text(); 
        var pname = $(this).find("ProductName").text(); 
        var pcatid = $(this).find("CategoryID").text(); 
        var pquantity = $(this).find("QuantityPerUnit").text(); 
        var pprice = $(this).find("UnitPrice").text(); 

        products.push([pid,pname,pcatid,pquantity,pprice]);      
       });    

       outputDisplay += "<ol class='no-bullet'><li>Product List<ol type='i'>" 

       for(i=0; i<categories.length; i++){ 

        outputDisplay += "<li>" + categories[i][1] + "<ol type='a'>"; 

        for(x=0; x<products.length; x++){ 

         if(categories[i][0] == products[x][2]){ 

          outputDisplay += "<li>" + products[x][1] + "</li>";        

         } 

        } 

        outputDisplay +="</ol></li>"; 

       } 

       document.getElementById("jstree").innerHTML = outputDisplay; 


      } 
     }); 




    }  
}); 

}

Answer 1

）は

 $.when(loadxml()).then(function(){ 

      $('#jstree').jstree(); 

     }); 



function loadxml(){ 
var deferred = $.Deferred(); 
    $.ajax({ 
    success : function(){ 
     //code 
     $.ajax({ 

      success: function(){ 
      //your code 
      deferred.resolve(); 

      } 
     }) 
    } 
    }) 

    return deferred.promise(); 


}  

を} defferedあります。

Answer 2

約束：

loadxml().then(function() { 
    $('#jstree').jstree(); 
}); 

function loadxml(){ 

    return $.ajax({/* parameters */}) 
      .then(function(catxml) { 
      //code that runs on the result of the first ajax request 

      //return the promise from the next ajax request 
      return $.ajax({/* parameters */}) 
      }) 
      .then(function(prodxml) { 
       //code that runs on the result of the second ajax request 
      }); 
}