Как ограничить запросы?

Question

[Messi]

Есть на странице кнопка, после нажатия на которую отправляется ajax запрос на сервер. Если я быстро нажимаю, например, 15 раз, столько запросов подряд и уйдет. Вопрос, как ограничить такие действия, как-то поставить максимум отправки в минуту или как?

Answer 1

[Александр Таратин]

https://lodash.com/docs/4.17.4#debounce
но лучше блокировать кнопку после первого нажатия, чтобы пользователю было видно, что жмякать дальше бесполезно. Например сделать её полупрозрачной и установить pointer-events:none.
По таймеру разбловировать или же по завершению запроса.

Answer 2

[lnked]

var $button = $('button');

$('body').on('submit', 'form', function(e) {
    e.preventDefault();

    $button.addClass('is-busy');
    
    var formData = !!window.FormData ? new FormData($(this)[0]) : $(this).serialize();

    $.ajax({
        url: '/request/url',
        type: 'POST',
        data: formData,
        dataType: 'JSON',
        contentType: false,
        processData: false,
        success: function(response) {
            $button.removeClass('is-busy');
        },
        error: function(response) {
            $button.removeClass('is-busy');
        }
    });
});

Comments

[Александр Таратин]

Дополню. Чтобы пе писать одно и тоже в success и error
можно использовать
jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });

$.ajax({...}).always(function(){ ...код тут выполнится в любом случае.. })