javascript – 不要’允许多次点击按钮/图标

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

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

我试过这个jQuery one function

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

但图标重新出现,所以我需要它们再次点击.

我也试图设置一个时间,但似乎无法让它工作.有人可以指出正确的方向.

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

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

解决方法:

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

该方法看起来像这样：

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秒钟,然后重新启用它自己.

我仍然建议你使用一种正常的方法,只需重新启用元素重新绘制到屏幕上 – 但上面也有效..