Javascript 和 AJAX 代码不会 return 预期值，直到运行两次

Question

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

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

checkAvailable() 函数调用 setAvailable() 函数，后者会调用 AJAX 来检查约会对象是否有空。 AJAX调用returnstrue/false。这有效并且 returns 正确的值。

我遇到的问题是我必须单击按钮两次以使 dayCount 和 validDays 具有正确的值。例如，如果我 select PM 预订，我知道 PM 此人有空。我第一次按下按钮时它说不可用，第二次和每次都说可用。

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

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
...
}

Javascript 和 AJAX 代码不会 return 预期值，直到运行两次

Javascript and AJAX code doesn't return expected values until ran twice

javascript

ajax

model-view-controller

Javascript 和 AJAX 代码不会 return 预期值，直到 运行 两次

Javascript and AJAX code doesn't return expected values until ran twice

javascript

ajax

model-view-controller

Javascript 和 AJAX 代码不会 return 预期值，直到运行两次