Do not allow to click on the button / icon more than once

Question

I am creating a whack-a-mole-style game in which a sum is given and the numbers are expected from the bottom of the container to the top. The goal of the game is to click the correct answer for the amount and collect as many correct answers as possible.

My problem is that the user can click on the numbers and other icons several times, which will lead to a crash. Is there any way to overcome this?

I tried this jQuery one function

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

But the icons reappear, so I need them to be clickable again.

I also tried to set a timeout, but cannot get it to work. Can someone point e in the right direction.

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

Fiddle: http://jsfiddle.net/GvNB8/

Answer 1

The main problem is that you do not interact with the symbols when re-displaying them. In this case, the only way to prevent the user from clicking is to create a method that allows you to double-click twice using a timeout.

This method will look something like this:

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

Then you use this function as follows:

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

What I'm using here is closing JavaScript. The function that you pass to the click event handler will only call the base function once, and then ignore all calls for 1 second, and then activate itself again.

I would still suggest that you go with the usual method of simply reactivating the elements when they are redrawn on the screen - but the above also works.

Answer 2

Why not just add information that this item has been clicked:

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