Question

我正在创造一种打鼹鼠式的游戏，其中给出了一个总和，并且从容器的底部到顶部的数字是动画的。游戏的目的是点击总和的正确答案并收集尽可能多的正确答案。

我的问题是用户可以多次点击数字和其他图标，导致其崩溃。有办法克服这个问题吗？

我试过这个jQuery one function

$(".character").one("click", function() {
});

但是图标重新出现，所以我需要它们再次点击。

我还试图设置一个时间，但似乎无法让它工作。有人能指出正确的方向。

    setTimeout(function() {
    $(".character").one("click", function() {
    });
}, 3000);

小提琴：http://jsfiddle.net/GvNB8/

Answer 1

您的主要问题是您在重新显示角色时没有与角色互动。在这种情况下，阻止用户点击的唯一方法是构建一种方法，以防止在超时的情况下快速连续点击两次。

该方法看起来像这样：

function clickThrottled(fn) {
  var click = true;
  return function () {
    if(click) {
      click = false;
      fn.apply(this, arguments);
      setTimeout(function () { click = true; }, 1000);
    }
  };
}

然后使用如下函数：

$('.character').click(clickThrottled(function () {
   // do your one time magic.
}));

我在这里使用的是JavaScript闭包。传递给click事件处理程序的函数只调用底层函数一次，然后忽略所有调用1秒钟，然后重新启用它。

我仍然建议你选择在重新绘制到屏幕时重新启用元素的常规方法 - 但上面的方法也有效..

Answer 2

为什么不直接添加表明已点击此项目的信息：

$(".character").click(function(){
    if(!$(this).data("hasBeenClicked")) {
        $(this).data("hasBeenClicked", true);
        // the rest of your logic ...
    }
});

不要＆＃39;允许多次单击按钮/图标

2 个答案: