Disable Multiple Clicks Javascript

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;

Solution 1:

you can disable element

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

after clicking it

Solution 2:

Disable to click your button for 30 second using setTimeout.

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

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

Solution 3:

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;

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

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

Solution 4:

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

Solution 5:

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

let clicked = false; //global variablefunctionprevent_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.