Javascript 和 AJAX 代码在运行两次之前不会返回预期值

Question

以下 2 种方法检查某人在某个日期范围内的每一天是否有空。我有 2 个变量，一个变量计算每个日期之间的总天数 (dayCount)，另一个变量在该人在给定日期有空时增加 (validDays)。

如果两个变量不相等，则会显示一条错误消息，指出它们不可用。

checkAvailable() 函数调用 setAvailable() 函数，后者又进行 AJAX 调用来检查某人在某个日期是否有空。 AJAX 调用返回 true/false。这有效并返回正确的值。

我遇到的问题是我必须单击按钮两次才能使 dayCount 和 validDays 获得正确的值。例如，如果我选择 PM 预订，我就知道 PM 该人有空。我第一次按下按钮时，它显示“不可用”，第二次以及之后每次都显示“可用”。

我认为问题是在比较两个变量之前异步没有完成，但是在添加一些暂停来检查之后，情况似乎并非如此。

Javascript 代码 -

var validDays = 0;

function checkAvailable() {

    event.preventDefault();

    var teacher = $("#selectedTeacher").val();

    var startDate = new Date($("#startDate").val());
    var endDate = new Date($("#endDate").val());
    var dayCount = 0;

    // loop for every day
    for (var day = startDate; day <= endDate; day.setDate(day.getDate() + 1)) {
        console.log('date: ' + day);
        var duration;
        var starttime;
        var endtime;

        var dayOfWeek = day.getDay();

        var monday = document.getElementById('enableMon');
        var tuesday = document.getElementById('enableTue');
        var wednesday = document.getElementById('enableWed');
        var thursday = document.getElementById('enableThu');
        var friday = document.getElementById('enableFri');

        if (dayOfWeek == "1" && monday.checked) {
            duration = $("#DurationMonday").val();
            starttime = $("#startTimeMon").val();
            endtime = $("#endTimeMon").val();

            console.log('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
            setAvailable(teacher, day, duration);
            dayCount = dayCount + 1;
            console.log('Day count is now - ' + dayCount + '. Valid days are - ' + validDays);
        }
        else if (dayOfWeek == "2" && tuesday.checked) {
            duration = $("#DurationTuesday").val();
            starttime = $("#startTimeTue").val();
            endtime = $("#endTimeTue").val();

            console.log('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
            setAvailable(teacher, day, duration);
            dayCount = dayCount + 1;
            console.log('Day count is now - ' + dayCount + '. Valid days are - ' + validDays);
        }
        else if (dayOfWeek == "3" && wednesday.checked) {
            duration = $("#DurationWednesday").val();
            starttime = $("#startTimeWed").val();
            endtime = $("#endTimeWed").val();

            console.log('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
            setAvailable(teacher, day, duration);
            dayCount = dayCount + 1;
            console.log('Day count is now - ' + dayCount + '. Valid days are - ' + validDays);
        }
        else if (dayOfWeek == "4" && thursday.checked) {
            duration = $("#DurationThursday").val();
            starttime = $("#startTimeThu").val();
            endtime = $("#endTimeThu").val();

            console.log('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
            setAvailable(teacher, day, duration);
            dayCount = dayCount + 1;
            console.log('Day count is now - ' + dayCount + '. Valid days are - ' + validDays);
        }
        else if (dayOfWeek == "5" && friday.checked) {
            duration = $("#DurationFriday").val();
            starttime = $("#startTimeFri").val();
            endtime = $("#endTimeFri").val();

            console.log('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
            setAvailable(teacher, day, duration);
            dayCount = dayCount + 1;
            console.log('Day count is now - ' + dayCount + '. Valid days are - ' + validDays);
        }
    }

    if(dayCount == validDays)
    {
        toastNotifySuccess("Available", 2000);
        $("#btnSave").attr('disabled', false);
    }
    else
    {
        toastNotifyError("The selected teacher is not available", 2000);
        $("#btnSave").attr('disabled', true);
    }

    dayCount = 0;
    validDays = 0;
};

async function setAvailable(teacher, day, duration) {

    return await $.ajax({
            url: '/Availability/CheckAvailabilityForDate?teacher=' + teacher + '&date=' + day.toISOString() + '&duration=' + duration,
            type: 'POST',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                if (response == false) {

                }
                else if(response == true) {
                    console.log('add 1 to valid days - ' + validDays);
                    validDays = validDays + 1;
                    console.log('added 1 to valid days - ' + validDays);
                }
            }
        });
};

MVC

[HttpPost]
    public async Task<string> CheckAvailabilityForDate(int teacher, DateTime date, BookingDuration duration, DateTime startTime, DateTime endTime)
    {
        bool available = true;

        available = await _availabilityService.CheckAvailable(date, teacher, duration, startTime, endTime, null);

        return JsonSerializer.Serialize(available);
    }

Answer 1

您忘记使用await。如果没有它，您将启动请求，但不等待结果。如果您第二次运行该方法，则请求可能已完成，并且您会看到正确的 validDays。

async function checkAvailable { // notice async keyword
...
    await setAvailable(teacher, day, duration); // notice await keyword
...
}