Что не так с AJAX-запросом?

Question

[Floydreme]

Получая данные из БД, с помощью AJAX я рисую таблицу. На каждую строку (класс row) можно нажать, и всплывут три кнопки: #do-btn, #sel-btn и #del-btn. Если часто нажимать на них, то данные сразу не отправляются, и, как следствие, сменив раздел (#done и #deleted) в таблице, новые данные не отрисуются, а будут лишь старые. Иногда AJAX может отправить 2 параметра ID, один из которых пуст. Подождав некоторое время, появляются ошибки. В чем может быть причина? Спасибо

Консоль:

let ajaxF = function (path) {
    $.ajax({
        url: `/admin/${path}`,
        type: "GET",
        contentType: "application/json",
        success: function (data) {
            body.empty();
            if ($('.table-body:empty').length === 0) {
                body.append('<h3 class="empty-h3">Пустота...</h3>')
            }
            for (let i = 0; i <= data.length; i++) {
                let cellID      = document.createElement("div");
                let cellName    = document.createElement("div");
                let cellMail    = document.createElement("div");
                let cellPhone   = document.createElement("div");
                let cellWishes  = document.createElement("div");
                let cellDay     = document.createElement("div");
                let cellDate    = document.createElement("div");

                let row = document.createElement("div");

                cellID.classList.add('cell-ID');
                cellName.classList.add('cell-Name');
                cellMail.classList.add('cell-Mail');
                cellPhone.classList.add('cell-Phone');
                cellWishes.classList.add('cell-Wishes');
                cellDay.classList.add('cell-Day');
                cellDate.classList.add('cell-Date');

                cellID.innerText = data[i].ID;
                cellName.innerText = data[i].Name;
                cellMail.innerText = data[i].Mail;
                cellPhone.innerText = data[i].Phone;
                cellWishes.innerText = data[i].Wishes;
                cellDay.innerText = data[i].Day;
                cellDate.innerText = data[i].Date;

                row.appendChild(cellID);
                row.appendChild(cellName);
                row.appendChild(cellMail);
                row.appendChild(cellPhone);
                row.appendChild(cellWishes);
                row.appendChild(cellDate);
                row.appendChild(cellDay);

                row.setAttribute('data-id', i);

                if (data[i].Selected === 1) {
                    row.classList.add('imp')
                }

                if (data[i].Done === 1 || data[i].Deleted === 1) {
                    row.style.display = 'none'
                }

                row.classList.add('row');
                body.append(row);
            }
        }
    })
};
let postF = function (param, data) {
    $.ajax({
        url: `/admin/${param}`,
        type: "POST",
        dataType: "json",
        data: {
            id: data
        }
    });
};

showTable();
function showTable() {
    $('#do-btn').text('Выполнить');
    $('#sel-btn').text('Выделить');
    $('.container #sel-btn, #del-btn, #sel-btn').css({display:'flex'});
    $('.container-button').css({width: '30%'});
    ajaxF('getordersandrender');

 
    $('body').on('click', '.row', function(){
        $(this).addClass('selected-block');
        $('.context').fadeIn(400);
        $('#menu').slideDown(400);
        let index = $(this).index();

        if ($('#done').hasClass('active')) {
            let id = $('.row').eq(index).children('.cell-ID').text();
            $('.container #sel-btn').css({display:'none'});
            $('#del-btn, #do-btn').css({width: '48%', display: 'flex'});
            $('#do-btn').text('Восстановить').on('click', function () {
                console.log(id + ' - нажато когда мы в разделе "Сделано"');
                postF('postDO-remove', id);
                $('.selected-block').remove();
                $('.context').fadeOut(400);
                return false
            });
        }

        if ($('#deleted').hasClass('active')) {
            let id = $('.row').eq(index).children('.cell-ID').text();
            $('.container #sel-btn, #del-btn').css({display:'none'});
            $('.container-button').css({width: '100%'});
            $('#do-btn').text('Восстановить').on('click', function () {
                postF('postDEL-remove', id);
                $('.selected-block').remove();
                $('.context').fadeOut(400);
                return false
            });
        }

        if ($('.selected-block').hasClass('imp'))  {
            let indexSel = $('.selected-block').index();
            let id = $('.selected-block').children('.cell-ID').text();
            $('#sel-btn').text('Снять выделение').on('click', function () {
               $('.row').eq(indexSel).removeClass('imp').removeClass('selected-block');
                postF('postSEL-remove', id);
                $('.context').fadeOut(400);
                return false
            });
        }
    });

    $('#do-btn').on('click', function () {
        let id = $('.selected-block').children('.cell-ID').text();
        console.log(id + ' - главная');
        $('.selected-block').remove();
        $('.context').fadeOut(400);
        postF('postDO', id);
        return false
    });

    $('#sel-btn').on('click', function () {
        let id = $('.selected-block').children('.cell-ID').text();
        postF('postSEL', id);
        $('.row').eq($('.selected-block').index()).addClass('imp').removeClass('selected-block');
        $('.context').fadeOut(400);
        return false
    });

    $('#del-btn').on('click',  function () {
        let id = $('.selected-block').children('.cell-ID').text();
        postF('postDEL', id);
        $('.selected-block').remove();
        $('.context').fadeOut(400);
        return false
    });
    return false
}

Answer 1

[Anton B]

Возможно причина в асинхронности JS.
Нажали несколько раз на кнопку, каждое нажатие породило запрос к серверу и перерисовку таблицы, вот и схлестнулись N потоков в борьбу за отрисовку одной таблицы.

Comments

[Floydreme]

А есть какой-нибудь способ, который запрещает создавать новый запрос, пока не выполнился предыдущий? abort() здесь не поможет, если я правильно понял его принцип работы

[Ао]

Floydreme, Создаёте переменную якорь в которую будете помещать статус запроса (например ajaxSended = "false"; запросов к серверу нет ), и перед отправкой нового запроса на сервер проверяйте эту переменную, если она true то не отправляйте запрос на сервер, если она false то отправляете запрос на сервер и присваеваете перменной true. а после получения ответа меняйте на false