Question

我尝试禁用多次点击元素或在每次点击之间设置延迟以防止内容重载

我正在考虑做这样的事情：

 var clicked = false;

if(!clicked)
{
    clicked = true;

    // do all my stuff right here !!

    setTimeout(function(){

        clicked = false;
    }, 3000);
}

但它不起作用。有人可以提供任何建议吗？

Answer 1

你可以禁用元素

$(element).prop('disabled', true);

点击后

Answer 2

我将你点击的变量置于外部点击功能之外，否则如果条件在每次点击时始终为真。

不使用jQuery，这段代码可以工作：

var clicked = false;

function clickEvent() {
if(!clicked)
{
    clicked = true;
    console.log('clicked!!');
    setTimeout(function(){
        clicked = false;
    }, 3000);
}
}

<button onclick="clickEvent()"> Click me twice</button>

Answer 3

禁用使用setTimeout点击按钮30秒。

 $("#btnTest").click(function() {
        $(this).attr("disabled", true);
        setTimeout(function() {
            $('#btnTest').removeAttr("disabled");      
        }, 30000);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' id='btnTest'>

Answer 4

这不会起作用，因为点击的变量在函数范围内。你需要关闭它。如果您想通过变量执行此操作，以下内容将会有所帮助。您也可以设置html5数据属性来处理相同的内容。

使用JSFiddle here

window.onload = function() {

  initListener();
};

var initListener = function() {
    var clicked = false;
    document.getElementById('btn').addEventListener('click', function(event) {
        if (!clicked) {
          clicked = true;
          alert('Hi');
          setTimeout(function() {
            clicked = false;
          }, 3000);
        }
      }
    );
  }

禁用多次点击JavaScript

4 个答案: