如何确保我的功能每次点击只运行一次答案

【问题标题】：How to make sure my function runs only once per click如何确保我的功能每次点击只运行一次
【发布时间】：2019-11-12 08:03:06
【问题描述】：

$('#myButton').click(function() {
    $('#buttonOne').click(function() {
      if(getOneOrTwo() === "one") {
        $('.firstObject').css('visibility', 'hidden');
        $('.secondObject').css('visibility','visible');
      } else {
          alert("Sorry, wrong guess.");
      }
     }
     
     $('#buttonTwo').click(function() {
      if(getOneOrTwo() === "two") {
        $('.firstObject').css('visibility', 'hidden');
        $('.secondObject').css('visibility','visible');
      } else {
          alert("Sorry, wrong guess.");
      }
  });

我在屏幕上有几张扑克牌，上面都有钻石。一开始我把所有的钻石都藏起来了。单击开始按钮时，我希望在第一张卡片上出现一个菱形，并选择一个随机数，其中 0.5 等于黑色。然后用户通过单击黑色或红色按钮来猜测它是红色还是黑色。如果他们猜对了，第一张牌上的菱形应该被隐藏，第二张牌上会出现一个菱形，表示他们在游戏中的进度。如果他们错了，它应该显示一个警报，告诉他们他们错了。红色按钮似乎可以正常工作，但是黑色按钮会导致每次我关闭警报时都会继续弹出警报，直到它正确为止，就好像该按钮被不断单击直到正确为止。

【问题讨论】：

$( '#pick-red' ).click(function() { 每次单击开始时都会添加另一个事件处理程序
请点击edit，然后点击[<>]并创建minimal reproducible example
为什么要调用 getCardColor();在pick-red和pick-black的点击事件之外？我认为不需要
@mplungjan $( '#pick-black' ).click( 以及
真的不清楚你的钻石一、二等指的是什么。您能否添加 HTML，以便至少我们可以看到您在说什么？不知道为什么你只有代码来隐藏类菱形的元素。我猜你不会看到太多那颗钻石……

标签： javascript jquery functional-programming

【解决方案1】：

您通常不应该在另一个点击处理程序内部设置点击处理程序。在大多数情况下，这是一种代码异味，就像这里一样。

您需要“开始”按钮选择颜色（进行选择），但仅此而已；至少不要在这里为其他按钮分配点击处理程序。它可以工作，但是当您在这个特定的“开始”点击处理程序外部定义点击处理程序时，它很简单。

红色/蓝色点击处理程序应该不（再次）选择颜色，因为这样用户可以多次尝试同一个按钮，直到它正确为止。似乎更合乎逻辑的是，仅在单击“开始”按钮时进行选择，之后会发生那张特定卡片的猜测。

所以把选择的卡片存放在某个地方。像这样：

var selected = null; // No selection yet
$('#buttonOne, #buttonTwo').hide(); // Initially hide the guessing buttons.

$('#myButton').click(function() {
    selected = getOneOrTwo();
    $('#buttonOne, #buttonTwo').show(); // Now that we have a selection, allow guessing
});

$('#buttonOne').click(function() {
    if (selected === "one") {
        // here do what ever you want to do when the guess is right
    } else {
        alert("Sorry, wrong guess.");
    }
});

// Similarly for the other button

【讨论】：