Код Javascript и AJAX не возвращает ожидаемые значения, пока не будет запущен дважды

Следующие 2 метода проверяют, доступен ли кто-то каждый день в пределах диапазона дат. У меня есть 2 переменные, одна из которых подсчитывает общее количество дней между каждой датой (dayCount), а другая увеличивается, когда человек доступен для данной даты (validDays).

Если 2 переменные не равны, отображается сообщение об ошибке, в котором говорится, что они недоступны.

Функция checkAvailable() вызывает функцию setAvailable(), которая, в свою очередь, выполняет AJAX-вызов для проверки доступности человека на дату. Вызов AJAX возвращает true/false. Это работает и возвращает правильное значение.

Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно дважды щелкнуть кнопку, чтобы dayCount и validDays имели правильные значения. Например, если я выбираю бронирование после полудня, я знаю, что человек свободен. Первый раз, когда я нажимаю кнопку, он говорит «Недоступно», второй и каждый раз после того, как он говорит «Доступно».

Я думал, что проблема в том, что асинхронность не завершилась до сравнения двух переменных, но после добавления некоторых пауз для проверки это, похоже, не так.

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.info('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.info('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
            setAvailable(teacher, day, duration);
            dayCount = dayCount + 1;
            console.info('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.info('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
            setAvailable(teacher, day, duration);
            dayCount = dayCount + 1;
            console.info('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.info('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
            setAvailable(teacher, day, duration);
            dayCount = dayCount + 1;
            console.info('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.info('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
            setAvailable(teacher, day, duration);
            dayCount = dayCount + 1;
            console.info('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.info('Add 1 to day count - ' + dayCount + '. Valid days are - ' + validDays);
            setAvailable(teacher, day, duration);
            dayCount = dayCount + 1;
            console.info('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.info('add 1 to valid days - ' + validDays);
                    validDays = validDays + 1;
                    console.info('added 1 to valid days - ' + validDays);
                }
            }
        });
};

МВК

[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);
    }

validDays в первом вызове всегда будет 0!

Milad Elyasi 18.03.2022 14:59

@MiladElyasi, но обязательно setAvailable(учитель, день, продолжительность); увеличивает его на 1 каждый раз, когда есть действительный день?

dynmatt 18.03.2022 15:08

Попробуйте упростить свой код (сделайте минимальный воспроизводимый пример)!

Mihályi Zoltán 24.03.2022 12:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
117
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы забыли использовать await. Без него вы запускаете запрос, но не ждете результата. Если вы запустите метод второй раз, запрос, вероятно, будет выполнен, и вы увидите правильное значение validDays.


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

Другие вопросы по теме