How to prevent button click while event still happening? Javascript-CodePudding

i try to find answer for my question on web but but I didn't come across anything similar.

Is there any way in JAVASCRIPT to prevent same event triggering two time, while first trigger don't finish all the job. I have some kind of spinning wheal and and I want to prevent the possibility of pressing the button until it turns a full circle, the time it takes to turn a full circle is 2s, but when the first spin is done I want button to work over and over again in the same way.

Here is my JAVASCRIPT code for that event.

`let num = 0

  spin2.addEventListener('click', () => {
    num  = 360
    linija.style.transform = `rotate(${num}deg)`
    linija.style.transition = "all 2s"
  })`

CodePudding user response：

Use setTimeout to do something like that :

button.addEventListener('click', () => {
  if (buttonDisabled === false) {
    // Logic
    num  = 360
    linija.style.transform = `rotate(${num}deg)`
    linija.style.transition = "all 2s"
    // Disable button
    buttonDisabled = true;
    button.textContent = 'Disabled';
    setTimeout(function() {
      buttonDisabled = false;
      button.textContent = 'Click me';
    }, 5000);
  }
});

Also, you should look at this : how to disable button for period and repeat that again (javaScript).

CodePudding user response：

If the click function take some time, you can disable the button on the function start and enable it at the end of the function.

const delay = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms))

const clickHandler = async(e) => {
   e.disabled = true;
   await delay(1000)
   e.disabled = false;
}

<button onclick="clickHandler(this)">Click</button>