Question

我正在用JS构建石头剪刀布游戏。用户通过element.addEventListener（'click'，...）在各自的div上单击来选择他们的石头/纸/剪刀输入用户玩电脑。结果在屏幕上显示3秒钟，然后屏幕复位。

当前，在显示结果时div仍可单击，这会中断结果显示过程。

我要这样做，如果在显示结果的过程中（单击后3秒钟内）尝试单击div来输入石头/纸张/剪刀，则会禁用div，因此单击它们不会执行任何操作。然后，一旦3秒钟结束，我想重新启用div，以便再次单击它们。

简单来说，我想为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

我找到了解决方案。创建一个布尔值，确定过渡是否发生。

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();
   };
}

现在，代码将检查其是否正在过渡，如果正在过渡，则不执行任何操作。如果不是，它将转换为false，然后在延迟3秒后恢复为true。

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

1 个答案: