防止后端的快速按钮点击

Question

我正在创建一个网页，其中有一个按钮。当用户按下按钮时，我的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 次(，并且仅返回最后一次调用的结果(注意，最后一次，不是第一次！

我该如何解决这个问题？

Answer 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代码来更改按钮的样式，例如"禁用"

Answer 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' );
    });
});

Answer 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>