Предотвратить быстрое нажатие кнопки для бэкэнда - PullRequest
Новая
       14

Предотвратить быстрое нажатие кнопки для бэкэнда

2 голосов
/ 05 апреля 2019

Я создаю веб-страницу, на которой находится кнопка.Когда пользователь нажимает кнопку, мой 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 раза) и возвращал результаты только для последнего вызова (осторожно, последний, нетпервый!).

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

Ответы [ 3 ]

2 голосов
/ 05 апреля 2019 
// 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' );
    });
});
2 голосов
/ 05 апреля 2019

Вы можете добавить 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-код для изменения стиля вашей кнопки, например, «отключен»

1 голос
/ 05 апреля 2019

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

$('#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>
...