如何在事件仍在发生时防止按钮单击？ Javascript

Question

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

Is there any way in JavaScript to prevent the same event from triggering two times, while the first trigger doesn't finish all the job?

I have some kind of spinning wheel 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 the 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"
})

Answer 1

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) .

Answer 2

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>