Preventing Double Clicks on image map areas

Question

I have a basic image map that executes a javascript/jquery routine when an area is clicked. At the moment, the DoStuff() method is executed twice if the area is double-clicked. Can anyone provide a method that will prevent double execution in a double-click scenario?

<img src="images/myimage.png" border="0" usemap="#Map1" />
<map name="Map1">
    <area coords="5,115,97,150" href="javascript:void(0);" onclick="DoStuff()">
    <area coords="104,116,199,149" href="javascript:void(0);" onclick="DoStuff()">
</map>

Answer 1

Use a boolean flag.

var hasBeenClicked = false;

// Your code...

if(!hasBeenClicked){
    hasBeenClicked = true;

    // My routine

    setTimeout(function(){ // McPhelpsius's idea (wait for 1sec before we can click again)
        hasBeenClicked = false; // My routine is over, we can click again
    }, 1000);
 } else {
    // do nothing 
 }

Answer 2

If you're using jQuery you can include this at the top of the click handler. On click it will disable the element which stops any click events from happening.

function DoStuff() {
    $('[name="Map1"]').prop('disabled', true);
    //Do Stuff..
}

This explains some other options depending on your jQuery version.