运行一个创建两次点击事件的函数导致一次点击发生两次点击事件

Question

我正在开发一款游戏，但我在这里总结了功能。

TestA() 用于在某个对象上创建点击事件。单击该对象时，它会更新数组 tester。

点击事件不应该总是存在，这就是为什么我用 TestA() 创建它，然后在 TestA().

中关闭它

然而，当我运行两个 TestA() 函数背靠背时，数组一次点击更新两次，而不是一次的预期行为，然后我需要再次点击第二次更新。

我正在尝试测试：

var tester = []

function TestA() {   
  $("someobject").click(function () {
    tester.push("hello")
    $(this).off()
  })
}

TestA()

----> 运行单击一次后，它本身就会 tester = ["hello"]。

TestA()
TestA()

--------> 运行这两个背靠背，ONE click tester 之后变成 ["hello","hello]

我知道 Javascript 会同时评估所有内容（我过去发过类似的问题），但我确实需要确保人们不能在这个游戏中作弊！

同样，我的目标是 TestA() 添加点击事件，让它在点击时起作用，直到第二次 TestA() 再次发出该事件。

-我想一个解决方法是让事件侦听器随处可见，其函数内部有一个“if”来检查函数是否可以在单击时进行评估——但我宁愿只创建点击事件的时间 windows。

Answer 1

这应该可以解决您的问题：

var tester = []

function TestA() {
  // First remove click handler and set a new one
  $("someobject").off("click").one("click", function () {
    tester.push("hello")
  })
}

TestA()

这是jsfiddle中的一个小例子https://jsfiddle.net/yusmneb1/

请注意：要实现某种作弊保护，您应该考虑对游戏逻辑进行服务器端验证。 Javascript 可以很容易地被用户操纵。这是关于该主题的问题的link：How to prevent html/JavaScript code modification

Answer 2

通过使用jQuery .one()你大概可以达到你想要的效果：关联的事件只会被触发一次：

const arr=[];
function clickOnOff(flag){
  let b=$("button").off("click");
  if(flag) b.one("click",ev=>{
   arr.push("click");
   $("#switch").prop("checked",false);
   console.log(arr)
  });
}
$("#switch").click(function(){clickOnOff(this.checked)});
// even multiple activation will result in a SINGLE click response:
clickOnOff(1);clickOnOff(1);

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<label><input type="checkbox" id="switch" checked /> listening ...</label><br>
<button>click</button>

运行一个创建两次点击事件的函数导致一次点击发生两次点击事件

Running a function that creates a click event twice causes the click event to happen twice with one click

javascript

jquery

events

jquery-events