等待异步ajax请求完成,尽管两个异步都正确

时间:2018-11-22 20:19:39

标签: jquery model-view-controller

我需要等待所有Ajax请求完成后再执行下一个,尽管两个异步都为true 而且我不想使async为false,因为我希望显示加载程序,这是我的代码

$('#RequestDetails_VacationPeriod')。blur(function(){

        AddPeriodToDate();

        ShowSickLeavesDistributionInfo(null);

    });

function AddPeriodToDate(){

        var employeeNumber = $("#RequestDetails_EmployeeNo").val();
        var vacationStartDate = $("#VacationStartDate").val();
        var periodValue = parseInt($("#RequestDetails_VacationPeriod").val());
        vacationTypeSelectedVal = $("#RequestDetails_VacationRequestSettingId").find(":selected").val();
        var totalLeavePeriodsUnderProcessing = $("#RequestDetails_TotalLeavePeriodsUnderProcessing").val();

        if (vacationStartDate && periodValue && vacationTypeSelectedVal) {

            $(".loader").fadeIn();

            $.ajax({
                type: "GET",
                url: "/EServices/Leave/NewLeaveRequest/AddPeriodToDate",
                async: true,
                data: {
                    "employeeNumber": employeeNumber,
                    "vacationStartDate": vacationStartDate,
                    "periodValue": periodValue,
                    "totalLeavePeriodsUnderProcessing": totalLeavePeriodsUnderProcessing,
                    "decisionTypeNumber": vacationTypeSelectedVal
                },
                cache: true,
                contentType: "application/json; charset=utf-8",
                contentType: "json",
                success: function (result) {

                    $(".loader").fadeOut();
                    $("#RequestDetails_VacationEndDate").val(result.VacationEndDate);

                    $("#RequestDetails_RemainingBalance").val(result.objVacationRequestDetail.RemainingBalance);

                    var remainingBalanceVal = parseInt($("#RequestDetails_RemainingBalance").val());

                    if (periodValue >= remainingBalanceVal) {

                        $("#RequestDetails_VacationPeriod").val("");
                        $('#Modal_RemainingBalance').addClass("md-show");

                        return false;
                    } else {
                        $('#Modal_RemainingBalance').removeClass("md-show");

                        return true;
                    }

                    $("#RequestDetails_RemainigAnnualDays").val(result.objVacationRequestDetail.RemainigAnnualDays);
                    $("#RequestDetails_RemainingAnnualDaysAfterDeductingLeavesPeriodUnderProcessing").val(result.objVacationRequestDetail.RemainingAnnualDaysAfterDeductingLeavesPeriodUnderProcessing);
                    $("#RequestDetails_RemainingBalanceAfterDeductingLeavesPeriodUnderProcessing").val(result.objVacationRequestDetail.RemainingBalanceAfterDeductingLeavesPeriodUnderProcessing);

                    var remainingBalanceAfterDeductingLeavesPeriodUnderProcessing = $("#RequestDetails_RemainingBalanceAfterDeductingLeavesPeriodUnderProcessing").val();
                    var remainingAnnualDaysAfterDeductingLeavesPeriodUnderProcessing = $("#RequestDetails_RemainingAnnualDaysAfterDeductingLeavesPeriodUnderProcessing").val();

                    if (parseInt(periodValue) > parseInt(remainingBalanceAfterDeductingLeavesPeriodUnderProcessing) ||
                        parseInt(periodValue) > parseInt(remainingAnnualDaysAfterDeductingLeavesPeriodUnderProcessing)) {

                        $("#RequestDetails_VacationPeriod").val("");
                        $('#Modal_VacationBalanceWithUnderProccessingNotEnough').addClass("md-show");

                        return false;

                    } else {
                        $('#Modal_VacationBalanceWithUnderProccessingNotEnough').removeClass("md-show");

                        return true;
                    }
                }
            });
        }
    }

函数ShowSickLeavesDistributionInfo(e){

    var employeeNo = $("#RequestDetails_EmployeeNo").val();
    var vacationStartDate = $("#VacationStartDate").val();
    var vacationPeriod = $("#RequestDetails_VacationPeriod").val();
    vacationTypeSelectedVal = $("#RequestDetails_VacationRequestSettingId").find(":selected").val();

    if ($(e) && $(e).attr("id") == "btn-Control") {

        var sickLeavesDistributionRequiredMessage = "";

        if (vacationTypeSelectedVal === "") {
            ReadFromResources("Ksu_SickLeavesDistributionVacationsystemCodeGroupReuired");
            sickLeavesDistributionRequiredMessage = resourceValue + " ,";
        }

        if (vacationStartDate === "") {

            ReadFromResources("Ksu_SickLeavesDistributionVacationStartReuired");
            sickLeavesDistributionRequiredMessage += resourceValue + " ,";
        }

        if (vacationPeriod === "") {
            ReadFromResources("Ksu_SickLeavesDistributionvacationPeriodReuired");
            sickLeavesDistributionRequiredMessage += resourceValue;
        }

        if (sickLeavesDistributionRequiredMessage) {

            var lastChar = sickLeavesDistributionRequiredMessage.substr(sickLeavesDistributionRequiredMessage.length - 1);

            if (lastChar === ",") {
                sickLeavesDistributionRequiredMessage = sickLeavesDistributionRequiredMessage.slice(0, -1);
            }

            $(".SickLeavesDistributionParametersRequired").html(sickLeavesDistributionRequiredMessage);
            $('#Modal_SickLeavesDistributionParametersRequired').addClass("md-show");

            return false;
        } else {
            $('#Modal_SickLeavesDistributionParametersRequired').removeClass("md-show");

            return true;
        }
    }

    if (vacationStartDate && vacationPeriod && vacationTypeSelectedVal) {

        if (vacationTypeSelectedVal == "00804" || vacationTypeSelectedVal == "00805" ||
            vacationTypeSelectedVal == "00810" || vacationTypeSelectedVal == "00820") {

            $(".loader").fadeIn();

            $.ajax({
                type: "GET",
                url: "/EServices/Leave/NewLeaveRequest/GetSickLeavesDistribution",
                async: true,
                data: {
                    "employeeNo": employeeNo,
                    "pSDate": vacationStartDate,
                    "pDays": vacationPeriod,
                    "systemCodeGroup": vacationTypeSelectedVal
                },
                contentType: "html",
                cache: false,
                success: function (result) {

                    $(".loader").fadeOut();

                    if (result == "") {

                        var selectedVacation = $("#RequestDetails_VacationRequestSettingId").find(":selected").text();

                        ReadFromResources("Ksu_SickLeavesDistributionMessage");
                        $(".SickLeavesDistributionMessage").html(resourceValue.replace("{0}", selectedVacation));
                        $("#RequestDetails_VacationRequestSettingId").val('');
                        $("#RequestDetails_VacationRequestSettingId").selectpicker('refresh');

                        $('#Modal_SickLeavesDistribution').addClass("md-show");

                        return false;

                    } else {
                        $('#DivSickleavesdistributionInfo').html(result);
                        $('#DivSickleavesdistribution').removeClass("md-show");

                        return true;
                    }
                }
            });
        }
    }
}

如果它执行AddPeriodToDate()并返回false,我想停止不执行ShowSickLeavesDistributionInfo(null);

1 个答案:

答案 0 :(得分:0)

假设您使用的是最新版本的jQuery(> = 1.5),则jQuery文档中提到的解决方案将是:

$.when( 
  $.ajax( "/page1.php" ), 
  $.ajax( "/page2.php" ) 
).then( myFunc, myFailure );

简而言之,您可以在$ .when子句中添加任意数量的ajax调用,这些调用将全部异步发送。全部完成后,将在$ .then子句中触发成功或失败方法。