SetInterval 60 second countdown issue jQuery

Question

I'm trying to countdown 60 seconds once I click the begin button and at 0 I don't want to just hide the counter, I want it to be reset. I ran into 2 problems: When I click the begin button again it's not starting over. The begin button is not disabled once I click it to start the countdown. While its counting down, when I press the begin button it accelerate the countdown. Any help is appreciated, here is the code:

function begin() {
    $('#begin').prop('disabled');
    myTimer = setInterval(function() {
      $('#timing').html(timing);
      if (timing === 0) {
        alert('Too late! Try again');
        clearInterval(myTimer);
        $('#timing').hide();
      }
      timing--;
    }, 1000);
  }

Answer 1

You have several issues:

1. You need .prop("disabled", true) to disable the button.
2. You need to reset the timing variable when you restart the timer.
3. You need to enable the button when the timer finishes so it can be pressed again.
4. You need to display the initial count when you start the timer

Code:

var timing;
var myTimer;

function begin() {
    timing = 60;
    $('#timing').html(timing);
    $('#begin').prop('disabled', true);
    myTimer = setInterval(function() {
      --timing;
      $('#timing').html(timing);
      if (timing === 0) {
        alert('Too late! Try again');
        clearInterval(myTimer);
        $('#begin').prop('disabled', false);
      }
    }, 1000);
 }