使用jQuery when 方法延迟一个函数的执行直到另一个函数完成答案

【问题标题】：Delay execution of a function until completion of another using jQuery when method使用jQuery when 方法延迟一个函数的执行直到另一个函数完成
【发布时间】：2016-05-25 16:22:31
【问题描述】：

我试图延迟 jstree 插件中的 jQuery 函数的执行，直到使用 jQuery when 方法完成另一个函数（替换目标 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;


            }
       });




    }    
});

}

【问题讨论】：

你的loadXML函数需要return一个promise，否则when不知道要等什么！
另外你应该使用then而不是success，否则它无法知道第二个ajax请求（也不会等待它）。
第一次调用success 调用第二个ajax (products.xml)，第二次调用成功调用.tree()。
嗨，Alex，我已经尝试从第二次成功中调用它，但不幸的是没有运气

标签： javascript jquery .when

【解决方案1】：

承诺：

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
           });
}

【讨论】：

嗨，亚当，谢谢。我无法让它工作。不知道为什么，我尝试使用 .then 和 then ，但两个实例都对我不起作用。
两件事？怎么样didn't work - 你有错误吗？您的jstree 在您的请求完成之前运行了吗？其次，你的 jQuery 版本是什么？如果它是 .pipe 代替 .then
嗨，亚当，我已经知道是什么原因导致它无法正常工作。这与我声明变量的位置有关。我将它们设为全局变量。从技术上讲，它应该可以工作。但是，我相信由于 jstree 函数，您建议的代码在加载时卡住了

【解决方案2】：

延迟

        $.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(); 


}

});

【讨论】：

反模式 - 只需返回承诺，您不需要新的延迟对象。
嗨，Adam，抱歉，您能详细说明一下这里的用途吗？抱歉，我不是 JS 和 Jquery 方面的专家
@user3608262 - ilyass 的答案会起作用，但在不需要时使用 $.Deferred 对象是一种反模式，应该避免使用更易读的代码 - 例如使用 $.ajax 调用返回的承诺，而不是创建一个新的和不必要的承诺。