Запретить быстрое нажатие кнопки для серверной части

#javascript #event-handling #dom-events

#javascript #обработка событий #dom-события

Вопрос:

Я создаю веб-страницу, на которой расположена кнопка. Когда пользователь нажимает кнопку, мой Javascript использует AJAX для вызова моей серверной части, которая запрашивает мою базу данных и получает несколько изображений для вывода на экран. Это что-то вроде этого (псевдокод):

 // JS event
button.on('click', function(){
    // Here my AJAX calling
    $.post(callMyBackend, {
       foo: bar // Parameters
    }, function (responseText) {
       // Here goes more stuff...
    });
});

Все работает отлично, но я хочу, чтобы пользователь не злоупотреблял, слишком быстро нажимая на кнопку. Итак, если пользователь нажимает 3 раза очень быстро, я бы хотел, чтобы вызов моего бэкэнда происходил один раз (не 3 раза) и возвращал результаты только для последнего вызова (внимание, последнего, а не первого!).).

Как я мог это решить?

Ответ №1:

Вы можете добавить progress переменную:

 // JS event
var progress = false;

button.on('click', function() {
    if (progress) {
        return;
    }
    progress = true;
    // Here my AJAX calling
    $.post(callMyBackend, {
        foo: bar // Parameters
    }, function(responseText) {

        progress = false;
        // Here goes more stuff...
    });
});

конечно, я рекомендую вам добавить js-код для изменения стиля вашей кнопки, например, «отключено»

Ответ №2:

 // JS event
button.on('click', function( this ){
if ( !this.hasAttribute( 'data-noclick' ) ) {
    // Here my AJAX calling
    this.setAttribute( 'data-noclick', 'true' );
    $.post(callMyBackend, {
       foo: bar // Parameters
    }, function (responseText) {
       // Here goes more stuff...
    this.removeAttribute( 'data-noclick' );
    });
});

Ответ №3:

Вы можете отключить кнопку в качестве первого действия. Когда вам нужно или по истечении времени ожидания, вы можете снова включить кнопку:

 $('#button').on('click', function(){
    this.disabled = true;
    setTimeout(function(ele) {
        ele.disabled = false;
    }, 1000, this)
    return; // ......
    // Here my AJAX calling
    $.post(callMyBackend, {
        foo: bar // Parameters
    }, function (responseText) {
        // Here goes more stuff...
    });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Click Me</button>