如何在 JS 中添加事件侦听器冷却时间（禁用然后重新启用事件单击）

Question

I am building a rock paper scissors game in JS. The user chooses their input of rock/paper/scissors by clicking on their respective divs via element.addEventListener('click', ...) The user plays vs the computer. The results display on screen for a 3 seconds and then the screen resets.

Currently, the divs are still clickable while the results are being shown, which interrupts the result-showing process.

I would like to make it so that IF you try to click a div to input rock/paper/scissors during the result showing process (within 3 seconds after clicking), the divs are disabled such that clicking them does nothing. Then once the 3 seconds are over, I want to re-enable the divs so that clicking them works again.

In simple terms, I want to add a cool-down to my div.addEventListener('click', ...)

var rock = document.getElementById("rock");

function layoutReset(){
   *reset the layout*
   ***re-enable rock.addEventListener('click')***
}
function game(){
   *play game*
   *show results*
   ***disable rock.addEventListener('click');***
   setTimeout(layoutReset(), 3000);   

}

rock.addEventListener('click', function{
   game();

})

Answer 1

I found a solution. Create a boolean for whether or not the transition is taking place.

var transitioning = false;

function layoutreset(){
   *reset stuff*
   transitioning = false;
}
function game(){
   *play game*
   *show results*
   transitioning=true
   setTimeout(layoutReset(), 3000);   
}


div.onclick = function(){
   if(transitioning=false){
      game();
   };
}

Now the code checks if its transitioning, if it is, it doesn't do anything. If it isnt, it will change transitioning to false, then back to true after a 3 second delay.