按下按钮后添加定时延迟以防止按钮垃圾邮件

Question

假设我有 4 个按钮

    <button id="one">One</button>
    <button id="two">Two</button>
    <button id="three">Three</button>
    <button id="four">Four</button>

并且为了防止垃圾邮件，我想在按下任何按钮时，在接下来的 0.6 秒内再次按下其中的 none。

我该如何实现？

Answer 1

// Get button elements
var els = document.getElementByTagName('button');

// Add an event handler to click event
// that triggers settimeout to set the disable value
els.addListener('click', function(){
  setTimeout(els.disable, 600);
}, true);

未测试

Answer 2

您可以使用此 javascript 代码：

var btns = document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
    btns[i].addEventListener('click', function(){
        disableButtons(true);
        setTimeout(function(){disableButtons(false);}, 600);
    });    
}
function disableButtons(state){
    for(var i=0;i<btns.length;i++){
        btns[i].disabled = !!state;    
    }
}

当然，您需要在页面加载后运行此代码。

Answer 3

正如 prasadmadanayake 在他的评论中所说，您可以通过 disable/enable 按钮来完成。

这是一个工作示例：

var intVal = 0;
$('button').on('click',function (e) {
    var id = $(this).attr('id');
    $('#'+id).attr('disabled', 'disabled');
    setTimeout(function(){enable(id)}, 3000);
                               
    return true;
});

function enable (id) {
    $('#'+id).removeAttr('disabled');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <button id="one">One</button>
    <button id="two">Two</button>
    <button id="three">Three</button>
    <button id="four">Four</button>

Answer 4

一种方法是使用 "click shield"。

以下是使用 jQuery 的方法。

var clickShield = false;
$('button').on('click', function() {
  if (!clickShield) {
    clickShield = true;
    console.log('handle click event');
    setTimeout(function() {
      clickShield = false;
    }, 600);
  }
});

Answer 5

使用 jQuery，您可以执行以下操作：

<button id="one">One</button>
<button id="two">Two</button>
<button id="three">Three</button>
<button id="four">Four</button>

$("button").on("click", function(e) {
    $("button").attr('disabled', 'disabled');
    setTimeout(function() {
        $("button").removeAttr('disabled');
    }, 600);
});

按下按钮后添加定时延迟以防止按钮垃圾邮件

Adding a timed delay after pressing a button to prevent button spam

html

javascript

css

button