Как предотвратить срабатывание нескольких вызовов AJAX при повторных щелчках

Давайте рассмотрим типичную проблему при создании веб-сайта:

На сайте есть кнопка или несколько кнопок, которые запускают вызов AJAX при нажатии. Ответ API загружается от нескольких миллисекунд до нескольких секунд, в зависимости от скорости сети. Затем пользователь решает нажать на эту кнопку второй раз, третий и четвертый, ожидая отображения некоторой информации на сайте. Как мы можем предотвратить запуск нового запроса API при каждом повторном клике?

Во-первых, давайте посмотрим на примере, что произошло бы, если бы ничего не было сделано. Это сайт-путеводитель, созданный мной и моей командой в рамках нашего первого проекта Bootcamp, на котором перечислены рестораны, погода и фотографии из разных городов по всему миру:

Дважды щелкнув карту погоды, можно будет вызвать два вызова AJAX и, следовательно, отобразить повторяющиеся результаты.

Хотя существуют разные подходы к решению этой проблемы, например, отключение всех кнопок, вызывающих этот конкретный запрос AJAX, до тех пор, пока запрос не будет завершен, или отмена предыдущего запроса и запуск нового, мы выбрали более простое решение:

• Поддерживайте переменную isLoading, в которой хранится статус запроса. Только если запрос не загружается (т. Е. Запрос AJAX не выполняется), мы запускаем новый запрос. В противном случае мы просто игнорируем новое событие щелчка.

Вот как будет выглядеть код:

var isLoading = false;
$(document).on("click", ".weather-card", function (event) {
    if (!isLoading) {
        $("#restaurants-container").empty();
        isLoading = true;
        $.ajax({
            "url": "{API_URL}",
            "method": "GET"
        }).then(function (response) {
            // Create elements and append to #restaurants-container
            // ...
            isLoading = false;
        });
    }
});

Если isLoading ложно, запускается вызов AJAX, и мы немедленно меняем его значение на true. После получения ответа AJAX мы возвращаем значение этой переменной к false, чтобы мы могли перестать игнорировать новые клики.

После внедрения этого исправления пользователь может несколько раз нажать одну и ту же или другую кнопку во время вызова API и получить уникальные (не повторяющиеся) результаты, поскольку наш код предотвращает срабатывание нескольких вызовов AJAX при повторных щелчках.

Давайте вернемся к приведенному выше примеру нашего туристического веб-сайта, на этот раз после того, как исправление будет применено:

Если несколько раз щелкнуть карточку погоды или щелкнуть две разные карточки во время ожидания ответа AJAX, теперь будут отображаться уникальные результаты для первой нажатой карточки («Париж» в приведенном выше примере), поскольку наш код игнорирует эти «лишние щелчки» пользователь сделал, ожидая загрузки информации.

Пожалуйста, не стесняйтесь делиться любыми комментариями, которые у вас могут быть! Как ты сам с этим справляешься?

Обязательно ознакомьтесь с этим проектом на Github.