Question

I have a simple countdown that is activated by a button. Using onclick i start the action, but I noticed that if you keep pressing the button it increases the time and the countdown is out of sync. How would I go about preventing this from happening, and only allowing one click at a time?

  var count = 10,
      startcounter = document.getElementById("stercount");

startcounter.onclick = function() {
  countdown = setInterval(function(){
    document.getElementById("countdown").innerHTML = count + " seconds remaining!";
    if (count <= 0) {
      clearInterval(countdown);
      document.getElementById("countdown").innerHTML = "Done!";
    }
    count--;
  }, 1000);
};

DEMO: http://jsfiddle.net/StWXk/1/
​

Answer 1

Remove the click handler:

startcounter.onclick = function() {
    this.onclick = null;
    ...
};

http://jsfiddle.net/StWXk/3/

Edit: Based on your pause button requirement, you can re-bind the click handler when the timer is paused:

function startTimer() {
    this.onclick = null;
    ...
}

startcounter.onclick = startTimer;

pausecounter.onclick = function() {
    startcounter.onclick = startTimer;
    clearTimeout(countdown);
};

http://jsfiddle.net/StWXk/8/