在自我执行之前等待函数完成答案

【问题标题】：wait for a function to complete before self execute在自我执行之前等待函数完成
【发布时间】：2014-07-26 06:44:36
【问题描述】：

我有两个函数：function1() 和 function2() 这两个函数都有对 servlet 的 ajax 调用。第二个函数使用文本框中的值，该值由 function1() 的 ajax 调用更新。现在我的问题是 function2() 在文本框更新之前运行。所以请帮助我。

我也用过

$.ajax({
    url:fun1(row),
    success:function(){
         fun2();
    }
});

 function fun1(row) {
     $(".calclr").val("0");
     var acq = row.find('td').eq(3).find("input").val();
     var rate = row.find('td').eq(6).find("input").val();
     $("#txtcomp").val(parseInt(acq * rate));
     $("#txtsolatium").val(parseInt($("#txtcomp").val() * 0.3));
     var field = $("#PlotTable").find(".tabactive");


     $(".tabactive").removeClass("tabactive");
     // $(this).children("td").addClass("tabactive");
     row.addClass("tabactive");
     var caseid = $("#caseId").val();

     JSONAry = JSON.stringify({
         Caseid: caseid
     });
     $.ajax({
         type: 'POST',
         url: 'geturgord',
         data: {
             JsonArray: JSONAry
         },
         success: function(retn) {
             var obj = JSON.parse(retn);
             if (obj.success == "true") {
                 var damg = obj.arr;
                 var objdam = JSON.parse(damg);
                 var assmnt = objdam.assess;
                 var not4us = objdam.not4us;
                 var notus417 = objdam.notus417;

                 var comland = $("#txtcomp").val();
                 if (objdam.ordurg == "1") {

                     var start = new Date(assmnt);
                     var end = new Date(not4us);
                     var diff = new Date(start - end);
                     var days = diff / 1000 / 60 / 60 / 24;

                     $("#txtintrst").val(parseInt(comland * days * (0.12 / 365)));

                 } else if (objdam.ordurg == "2") {

                     var start = new Date(assmnt);
                     var end = new Date(notus417);
                     var diff = new Date(start - end);
                     var days = diff / 1000 / 60 / 60 / 24;
                     $("#txtintrst").val(parseInt(comland * days * (0.12 / 365)));

                 }

                 var awdid = $("#hidawdid").val();
                 var pltsl = row.find('td').eq(1).find("input").val();
                 var table = "surfdam";
                 JSONArry = JSON.stringify({
                     Awdid: awdid,
                     id: pltsl,
                     Table: table
                 });

                 $.ajax({
                     type: 'POST',
                     url: 'getAwdeePlt',
                     data: {
                         JsonArray: JSONArry
                     },
                     success: function(retn) {
                         var obj = JSON.parse(retn);
                         if (obj.success == "true") {
                             var surfdam = obj.table;
                             var objdam = JSON.parse(surfdam);
                             var damtot = 0;
                             $.each(objdam, function(i) {
                                 damtot = damtot + parseFloat(objdam[i].damamount);
                             });
                             $("#txtsurf").val(parseInt(damtot));
                             $("#txttotcomp").val(parseInt($("#txtcomp").val()) +
                                 parseInt($("#txtintrst").val()) + parseInt($(
                                     "#txtsolatium").val()) + parseInt($("#txtsurf")
                                     .val()));

                         }
                     }
                 });
             }
         }
     });
 }

【问题讨论】：

fun1() 是 ajax 调用吗？
是的 fun1() 和 fun2() 都有 ajax 调用
文本框更新在代码的哪里完成？
请将代码出示给fun1()。如果不更改fun1() 的代码，您将无法解决此问题。只有在 fun1() 使用其成功处理程序或使用 Promise 完成后，您才会触发您显示的 ajax 调用。
您是否尝试过使用complete 字段？您可以阅读有关ajax 的更多信息。还有一种方法可以在 ajax 完成后使用.done() 执行回调

标签： jquery ajax function jsp servlets

【解决方案1】：

这整个事情可能最好用 Promise 来完成，但是你可以通过向fun1() 添加一个回调来解决它，而不是通过添加一个回调来解决它，当它最终完成所有内部工作时调用它，最终数据是传递给该回调，然后您从该回调触发另一个 ajax 调用。

我只是在这段代码中的 cmets 之后立即更改了代码：

function fun1(row, completeFn) {
     $(".calclr").val("0");
     var acq = row.find('td').eq(3).find("input").val();
     var rate = row.find('td').eq(6).find("input").val();
     $("#txtcomp").val(parseInt(acq * rate));
     $("#txtsolatium").val(parseInt($("#txtcomp").val() * 0.3));
     var field = $("#PlotTable").find(".tabactive");


     $(".tabactive").removeClass("tabactive");
     row.addClass("tabactive");
     var caseid = $("#caseId").val();

     JSONAry = JSON.stringify({
         Caseid: caseid
     });
     $.ajax({
         type: 'POST',
         url: 'geturgord',
         data: {
             JsonArray: JSONAry
         },
         success: function(retn) {
             var obj = JSON.parse(retn);
             if (obj.success == "true") {
                 var damg = obj.arr;
                 var objdam = JSON.parse(damg);
                 var assmnt = objdam.assess;
                 var not4us = objdam.not4us;
                 var notus417 = objdam.notus417;

                 var comland = $("#txtcomp").val();
                 if (objdam.ordurg == "1") {

                     var start = new Date(assmnt);
                     var end = new Date(not4us);
                     var diff = new Date(start - end);
                     var days = diff / 1000 / 60 / 60 / 24;

                     $("#txtintrst").val(parseInt(comland * days * (0.12 / 365)));

                 } else if (objdam.ordurg == "2") {

                     var start = new Date(assmnt);
                     var end = new Date(notus417);
                     var diff = new Date(start - end);
                     var days = diff / 1000 / 60 / 60 / 24;
                     $("#txtintrst").val(parseInt(comland * days * (0.12 / 365)));

                 }

                 var awdid = $("#hidawdid").val();
                 var pltsl = row.find('td').eq(1).find("input").val();
                 var table = "surfdam";
                 JSONArry = JSON.stringify({
                     Awdid: awdid,
                     id: pltsl,
                     Table: table
                 });

                 $.ajax({
                     type: 'POST',
                     url: 'getAwdeePlt',
                     data: {
                         JsonArray: JSONArry
                     },
                     success: function(retn) {
                         var obj = JSON.parse(retn);
                         if (obj.success == "true") {
                             var surfdam = obj.table;
                             var objdam = JSON.parse(surfdam);
                             var damtot = 0;
                             $.each(objdam, function(i) {
                                 damtot = damtot + parseFloat(objdam[i].damamount);
                             });
                             $("#txtsurf").val(parseInt(damtot));
                             $("#txttotcomp").val(parseInt($("#txtcomp").val()) +
                                 parseInt($("#txtintrst").val()) + parseInt($(
                                     "#txtsolatium").val()) + parseInt($("#txtsurf")
                                     .val()));
                         }
                         // call the callback to indicate that we are done now
                         completeFn(/* pass whatever data you want here */);
                     }
                 });
             }
         }
     });
 }

 // call fun1() and invoke our other ajax calls when it calls its callback 
 // to indicate that it is done with all its internal processing
 fun1(function(data) {
     $.ajax({
         url: /* I'm not sure what is supposed to go here */,
         success:function(){
             fun2();
         }
      });         
 });

仅供参考，我不确定应该在 url 字段中将什么传递给您的 ajax 调用。您正在传递来自fun1() 的返回结果，但它没有返回任何内容，所以我不知道您打算在那里传递什么。如果它是 fun1() 使用所有 ajax 调用计算的值，那么您可以将它传递给回调，它将在回调中作为参数 data 提供。

promise 版本如下所示：

function fun1(row) {
     $(".calclr").val("0");
     var acq = row.find('td').eq(3).find("input").val();
     var rate = row.find('td').eq(6).find("input").val();
     $("#txtcomp").val(parseInt(acq * rate));
     $("#txtsolatium").val(parseInt($("#txtcomp").val() * 0.3));
     var field = $("#PlotTable").find(".tabactive");


     $(".tabactive").removeClass("tabactive");
     row.addClass("tabactive");
     var caseid = $("#caseId").val();

     JSONAry = JSON.stringify({
         Caseid: caseid
     });
     return $.ajax({
         type: 'POST',
         url: 'geturgord',
         data: {
             JsonArray: JSONAry
         }
     }).then(function(retn) {
         var obj = JSON.parse(retn);
         if (obj.success == "true") {
             var damg = obj.arr;
             var objdam = JSON.parse(damg);
             var assmnt = objdam.assess;
             var not4us = objdam.not4us;
             var notus417 = objdam.notus417;

             var comland = $("#txtcomp").val();
             if (objdam.ordurg == "1") {

                 var start = new Date(assmnt);
                 var end = new Date(not4us);
                 var diff = new Date(start - end);
                 var days = diff / 1000 / 60 / 60 / 24;

                 $("#txtintrst").val(parseInt(comland * days * (0.12 / 365)));

             } else if (objdam.ordurg == "2") {

                 var start = new Date(assmnt);
                 var end = new Date(notus417);
                 var diff = new Date(start - end);
                 var days = diff / 1000 / 60 / 60 / 24;
                 $("#txtintrst").val(parseInt(comland * days * (0.12 / 365)));

             }

             var awdid = $("#hidawdid").val();
             var pltsl = row.find('td').eq(1).find("input").val();
             var table = "surfdam";
             JSONArry = JSON.stringify({
                 Awdid: awdid,
                 id: pltsl,
                 Table: table
             });

             return $.ajax({
                 type: 'POST',
                 url: 'getAwdeePlt',
                 data: {
                     JsonArray: JSONArry
                 }
             });
         }
     }).then(function(retn) {
         var obj = JSON.parse(retn);
         if (obj.success == "true") {
             var surfdam = obj.table;
             var objdam = JSON.parse(surfdam);
             var damtot = 0;
             $.each(objdam, function(i) {
                 damtot = damtot + parseFloat(objdam[i].damamount);
             });
             $("#txtsurf").val(parseInt(damtot));
             $("#txttotcomp").val(parseInt($("#txtcomp").val()) +
                 parseInt($("#txtintrst").val()) + parseInt($(
                     "#txtsolatium").val()) + parseInt($("#txtsurf")
                     .val()));
         }
     });
 }


 // now invoke the right sequence of functions and ajax calls
 fun1().then(function(data) {
     return $.ajax({url: /* I'm not sure what is supposed to go here */ });
 }).then(function(data) {
     fun2();
 });

【讨论】：

谢谢我可以使用回调。您真正想了解的有关 url 的信息。我只想将“数据”变量传递给 fun1()。
@Prasenjit - 什么data 变量？它的价值从何而来？
我已经添加了答案的承诺版本。
谢谢@jfriend00 我使用了 async: false 它解决了我的问题
async: false 通常是进行 ajax 调用的一种不好的方法，因为它会在 ajax 调用期间锁定浏览器，并且由于您连续有多个调用，所以这并不好。好的异步代码更难编写，但却是更好的编码方式，因为它可以带来更好的用户体验。