jquery - Disable multiple clicks JavaScript - Stack Overflow

admin管理员组

文章数量:1351115

I am trying to disable multiple clicks on element or set a delay between each click to prevent content overloading

I am thinking to do something like this:

 var clicked = false;

if(!clicked)
{
    clicked = true;

    // do all my stuff right here !!

    setTimeout(function(){

        clicked = false;
    }, 3000);
}

But it's not working. Can anyone offer any suggestions?

I am trying to disable multiple clicks on element or set a delay between each click to prevent content overloading

I am thinking to do something like this:

 var clicked = false;

if(!clicked)
{
    clicked = true;

    // do all my stuff right here !!

    setTimeout(function(){

        clicked = false;
    }, 3000);
}

But it's not working. Can anyone offer any suggestions?

• javascript
• jquery

Share Improve this question Follow edited Mar 13, 2019 at 15:19 Mistu4u 5,4261515 gold badges5959 silver badges9595 bronze badges asked Apr 20, 2017 at 8:38 lotfiolotfio 1,93622 gold badges1919 silver badges3434 bronze badges 8

• something like that !! you don't have to scream, calm down. – Oen44 Commented Apr 20, 2017 at 8:40
• What's the problem exactly? – pablochan Commented Apr 20, 2017 at 8:41
• are you trying to send ajax request? or trying to disable clicking on a button for few seconds? can you post more code so we get a better understanding of your problem – boroboris Commented Apr 20, 2017 at 8:42
• 2 Possible duplicate of After link's first click, make link unclickable, wait for transition end + 1s, then make link clickable again – Dan Philip Bejoy Commented Apr 20, 2017 at 8:44
• Like the answer below says, the best way is to lock it via GUI, which is making the button itself "disabled". Please let me know if it's fine for you. If not, I will send another solution, without changing the GUI. – Robo Robok Commented Apr 20, 2017 at 8:44

 |  Show 3 more ments

5 Answers 5

Sorted by: Reset to default 4

you can disable element

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

after clicking it

Disable to click your button for 30 second using setTimeout.

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

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

I supoppose you init clicked variable outside click function, otherwise if condition always be true on each click.

Without using jQuery this code works:

var clicked = false;

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

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

This won't work because the clicked variable is in function scope. You need closure for that. Below would help if you want to do this via a variable. You can set html5 data attributes also to handle the same.

Working 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);
        }
      }
    );
  }

I put the following code at the beginning of my main js script:

let clicked = false; //global variable

function prevent_double_click() {
    clicked = true;
    setTimeout(function() {
        clicked = false;
    }, 1000);
}

Then each function where you want to prevent the double click looks like this:

function myFunction() {

    if (clicked) return;
    prevent_double_click();

    //your code here
}

That way you won't be able to click again after 1 second.

本文标签： jqueryDisable multiple clicks JavaScriptStack Overflow