如何在 javascript 中临时禁用按钮或“单击”事件？

Question

I have a javascript codum playing rock paper scissors with the computer when I click on one of the options, but after selecting one of the rock-paper-scissors I want the button or click event to be disabled for 2 seconds, let me explain the event more clearly; I clicked the button of one of the three of Rock-Paper-Scissors and the 2 second animation started and while this animation is being made I shouldn't press a new button, that click event won't work for 2 seconds.

// Code of click event (it's inner of options.forEach)
const playMatch = () => {
        const options = document.querySelectorAll(".options button");
        const playerHand = document.querySelector(".player-hand");
        const computerHand = document.querySelector(".computer-hand");
        const hands = document.querySelectorAll(".hands img");

        hands.forEach(hand => {
            hand.addEventListener('animationend', function () {
                this.style.animation = '';
            })
        })
        //Computer Options
        const computerOptions = ["rock", "paper", "scissors"];

        options.forEach(option => {
            option.addEventListener("click", function () {
                //Computer Choice
                const computerNumber = Math.floor(Math.random() * 3);
                const computerChoice = computerOptions[computerNumber];

                setTimeout(() => {
                    compareHands(this.textContent, computerChoice);
                    playerHand.src = `./assets/${this.textContent}.png`;
                    computerHand.src = `./assets/${computerChoice}.png`;
                }, 2000);

                // Animation
                playerHand.style.animation = "shakePlayer 2s ease";
                computerHand.style.animation = "shakeComputer 2s ease";
            });
        });
    };

Answer 1

I would wrap my function inside something like this

const throttle = (func, wait = 2000) => {
  let timer = null;
  return function(...args) {
    if (timer === null) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, wait);
    }
  };
};

What this does is that it would prevent the function from responding until the wait time is elapsed.

Answer 2

You can put your clickable items (buttons) inside a <form> element (or any parent element, really) and do this:

const form = document.querySelector('form') // or '.my-form' or '#my-form-id' etc.
const btn = document.querySelector('#the-button')

const disableForm = (selector, state) => {
  let elements = document.querySelector(selector).elements
  for (let cnt = 0; cnt < elements.length; cnt++) {
    elements[cnt].disabled = state
  }
}

btn.addEventlistener('click', () => {

  disableForm(form, true)

  // do other stuff
  
  // Remove form lock after 2s:

  setTimeout(() => { disableForm(form, false) }, 2000)
}