JavaScript - Disable click function for duration of countdown

Question

So I've got a basic countdown timer counting down from 5 minutes initiated by a click event ('START CLOCK'). I would like to disable this function once the countdown has started until the countdown has finished. Any suggestions?

<html>
<head>


</head>
<body>

    <h1>Countdown Clock</h1>

    <div onclick="startClock()">START CLOCK</div>

    <div id="clockdiv">

        <div>
            <span class="hours"></span>
            <div class="smalltext">Hours</div>
        </div>
        <div>
            <span class="minutes"></span>
            <div class="smalltext">Minutes</div>
        </div>
        <div>
            <span class="seconds"></span>
            <div class="smalltext">Seconds</div>
        </div>
    </div>


    <script>
    function getTimeRemaining(endtime) {
        var t = Date.parse(endtime) - Date.parse(new Date());
        var seconds = Math.floor((t / 1000) % 60);
        var minutes = Math.floor((t / 1000 / 60) % 60);
        var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    //var days = Math.floor(t / (1000 * 60 * 60 * 24));
    return {
    'total': t,
    //'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
    };
    }

    function startClock() {
     function initializeClock(id, endtime) {
      var clock = document.getElementById(id);
      //var daysSpan = clock.querySelector('.days');
      var hoursSpan = clock.querySelector('.hours');
      var minutesSpan = clock.querySelector('.minutes');
      var secondsSpan = clock.querySelector('.seconds');

      function updateClock() {
        var t = getTimeRemaining(endtime);

        //daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
            clearInterval(timeinterval);
          }
        }

        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
        }

        var timeInMinutes = 5;
        var currentTime = Date.parse(new Date());
        var deadline = new Date(currentTime + timeInMinutes*60*1000);
        initializeClock('clockdiv', deadline);

        }

        </script>
        </body>

        </html>

score 1 · Answer 1 · answered May 05 '16 at 03:40

Since you are attaching event listener via html attribute, the easiest way to achieve your goal would be simple global flag - raise it when function is started, drop it when function is finished.
If function is already running and user is trying to run it once more (flag is raised) just return immediately.

score 0 · Answer 2 · answered May 05 '16 at 03:40

I've essentially added a flag variable in your function.

 var flag=0;
    function startClock() {

     function initializeClock(id, endtime) {
       if(flag==0)
     {
      var clock = document.getElementById(id);
      //var daysSpan = clock.querySelector('.days');
      var hoursSpan = clock.querySelector('.hours');
      var minutesSpan = clock.querySelector('.minutes');
      var secondsSpan = clock.querySelector('.seconds');
flag=1;
}
      function updateClock() {
        var t = getTimeRemaining(endtime);

        //daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
            clearInterval(timeinterval);
            flag=0;
          }
        }

        updateClock();
        var timeinterval = setInterval(updateClock, 1000);
        }

        var timeInMinutes = 1;
        var currentTime = Date.parse(new Date());
        var deadline = new Date(currentTime + timeInMinutes*60*1000);
        initializeClock('clockdiv', deadline);


    }

Whenever the clock is ticking, the flag is set.When the counter hits 0, it's reset to the original value.

Here is a DEMO with time set to 1 minute.

JavaScript - Disable click function for duration of countdown

2 Answers2