Дождитесь завершения асинхронных ajax-запросов, хотя оба асинхронных истины

Question

Мне нужно дождаться выполнения всего Ajax-запроса, прежде чем я выполню следующий, хотя async 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;
                    }
                }
            });
        }
    }

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

Answer 1

Если вы используете достаточно свежую версию jQuery (> = 1.5), решение, упомянутое в документации по jQuery, будет:

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

Короче говоря, вы можете добавить любое количествоajax вызывает в предложении $ .when, которое будет отправлено асинхронно.Когда все выполнено, метод успеха или неудачи запускается в предложении $ .then.