Hello how can i disable a button with the bind function for 10 sec?

jQuery('#wsf-1-field-155').bind('click', function() {
  ScanRegistration();
  setTimeout(function() {
    jQuery('#wsf-1-field-155').bind();
  }, 10000);
})

CodePudding user response：

I solved this Problem with this, i change .removeProp with .removeAttr

jQuery('#wsf-1-field-155').on('click', function() {
    jQuery(this).prop('disabled', true);
        ScanRegistration();
        setTimeout(() =>
    jQuery(this).removeAttr('disabled'), 20000);

CodePudding user response：

.bind() is deprecated. You should use .on() instead.

You don't use event binding to disable a button, you set its disabled property. Then use removeProp() to re-enable it after 10 seconds.

jQuery('#wsf-1-field-155').on('click', function() {
  $(this).prop('disabled', true);
  ScanRegistration();
  setTimeout(() =>
    $(this).removeProp('disabled'), 10000);
})

CodePudding user response：

Here's a plain JavaScript solution. scanRegistration() just counts up to 10sec.

Details are commented in example

// count and interval variables should be declared outside of function
let i = 0;
let int;
// Reference the <button>
const btn = document.querySelector('#GO');

// Function enables the <button>
const enableBtn = () => btn.disabled = false;

/*
Bind the "click" event to the <button>
Disable <button>
call scanRegistration()
call enableBtn() @10 seconds
*/
btn.onclick = function(event) {
  this.disabled = true;
  scanRegistration();
  setTimeout(() => {
    enableBtn();
  }, 10000);
};

// Function logs every second
const logScan = i => console.log("SCAN: "   i);

/*
Set an interval at the rate of 1 second
Increment the count variable i
call logScan()
If i is equal to or more than 10 end interval
*/
function scanRegistration() {
  console.log("START SCAN");
  int = setInterval(() => {
    i  ;
    logScan(i);
    if (i >= 10) {
      console.log("END SCAN");
      clearInterval(int);
    }
  }, 1000);
}

<button id="GO">GO!</button>