How to prevent a double-click using jQuery?

This is my first ever post & I'm very inexperienced so please go easy on me, but I feel I've got a valid contribution that may be helpful to someone...

Sometimes you need a very big time window between repeat clicks (eg a mailto link where it takes a couple of secs for the email app to open and you don't want it re-triggered), yet you don't want to slow the user down elsewhere. My solution is to use class names for the links depending on event type, while retaining double-click functionality elsewhere...

var controlspeed = 0;

$(document).on('click','a',function (event) {
    eventtype = this.className;
    controlspeed ++;
    if (eventtype == "eg-class01") {
        speedlimit = 3000;
    } else if (eventtype == "eg-class02") { 
        speedlimit = 500; 
    } else { 
        speedlimit = 0; 
    } 
    setTimeout(function() {
        controlspeed = 0;
    },speedlimit);
    if (controlspeed > 1) {
        event.preventDefault();
        return;
    } else {

        (usual onclick code goes here)

    }
});

You can do something like this to disable submit button when loading a new page with the same form:

$("#btnConfirm").bind("click", function (e) {
  $("#btnConfirm ").css("pointer-events", "none");
});

The submit button could look like this:

<input
    type="submit"
    name="ACMS_POST_Form_Confirm"
    value="confirm"
    id="btnConfirm"
/>

If what you really want is to avoid multiple form submissions, and not just prevent double click, using jQuery one() on a button's click event can be problematic if there's client-side validation (such as text fields marked as required). That's because click triggers client-side validation, and if the validation fails you cannot use the button again. To avoid this, one() can still be used directly on the form's submit event. This is the cleanest jQuery-based solution I found for that:

<script type="text/javascript">
$("#my-signup-form").one("submit", function() {
    // Just disable the button.
    // There will be only one form submission.
    $("#my-signup-btn").prop("disabled", true);
});
</script>

I was able to do this task efficiently by the following way

1. As soon as the button click handler is called disable the button

2. Do the necessary operations needed to be done.

3. Set the disabled property back to false after a couple of seconds using SetTimeout

    $('#btn1).click(function(e){
    $('#btn1').prop("disabled", true);
   
    setTimeout(()=>{
    $('#btn1').prop("disabled", false);
    },2000)
   

This should solve the issue.

You can use this for whole application

$('a').not('.excluded-class, .excluded-class').click(function () {
     $(this).css('pointer-events','none');
});
$('button').not(".excluded-class").click(function () {
     $(this).prop('disabled', true);
});

excluded class, maybe if u use SweetAlerts or someting for confirm actions

Setting a flag worked for me. My flag is called, "submitOnce".

var submitOnce = 0;

$(document).ready(function(){
  $("form").submit(function(e) {
    if (submitOnce > 0) {
      e.preventDefault();
    }
    //alert(submitOnce);
    submitOnce +=1;                
  });
});