Question

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

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

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

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

我正在尝试测试：

var tester = []

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

TestA()

----> 单独运行一次，点击后会产生 tester = ["hello"]。

TestA()
TestA()

------->这两个背靠背运行，一键测试后变成["hello","hello]

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

同样，我的目标是让 TestA() 添加点击事件，让它在点击后工作一次，直到第二个 TestA() 再次关闭该事件。

-我想一种解决方法是在其函数内部使用“if”来检查是否可以在单击时评估该函数，但我更愿意只创建单击小时间窗口中的事件。

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。这是有关该主题的问题的链接：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>

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

2 个答案: