CODEWITHSUNDEEP
jquerysetintervalcountdown
followthemadhat
followthemadhat

Reputation: 99

Pause setInterval on click with the countdown timer

I have a button that triggering countdown timer on click. I want to pause this timer when I click on the timer box, and un-pause when click again. I was able to stop the countdown on click but I can't figure out how to start it back.

jQuery(function ($) {

  var countdown;
  
  function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    countdown = setInterval(function () {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      display.text(minutes + ":" + seconds);

      if (--timer < 0) {
        clearInterval(countdown);
      }
    }, 1000);
  }
  
    $('.start-timer').on('click',function() {
      $('body').append("<div id='countdown-timer'></div>");
      var fiveMinutes = 60 * 5;
      var display = $('#countdown-timer');
      startTimer(fiveMinutes, display);
  });
  
    // Want this function to be toggling the timer countdown

  $('body').on('click', '#countdown-timer',function(){
    clearInterval(countdown);
    countdown = null;
  });
  
});
#countdown-timer {
  position: absolute;
  top: 20%;
  cursor: pointer;
  background: rgba(0,0,0,0.4);
  color: white;
  border-width: 1px;
  border-color: #fed136; 
  font-size: 50px;
  border-radius: 4px;
}
<body>
  <div id="countdown-timer"></div>
 <button class="start-timer">Start timer</button>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>

Here's the fiddle: https://jsfiddle.net/wLnmk5dx/3/

Upvotes: 0

Views: 708

Answers (1)

hekta
hekta

Reputation: 126

Here is snippet with function to pause/unpause timer. I changed a code a little bit, too. Check it.
You can also reset first interval delay of the timer.

jQuery(function($) {

  var paused;
  var countdown;

  function startTimer(duration, display) {
    var timer = duration;
    var minutes;
    var seconds;

    countdown = setInterval(function() {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      display.text(minutes + ":" + seconds);

      if (--timer < 0) {
        clearInterval(countdown);
      }
    }, 1000);
  }

  $('.start-timer').on('click', function() {
    if (countdown) {
      clearInterval(countdown);
    }
    paused = false;
    $('body').append("<div id='countdown-timer'></div>");
    var fiveMinutes = 60 * 5;
    startTimer(fiveMinutes, $('#countdown-timer'));
  });

  // Pause/Unpause timer

  $('body').on('click', '#countdown-timer', function() {
    if (paused) {
      var timer = $(this).text().split(':');
      startTimer(Number(timer[0] * 60) + Number(timer[1]), $('#countdown-timer'));
      paused = false;
    } else {
      clearInterval(countdown);
      paused = true;
    }
  });
});
#countdown-timer {
  position: absolute;
  top: 20%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  border-width: 1px;
  border-color: #fed136;
  font-size: 50px;
  border-radius: 4px;
}
<body>
  <div id="countdown-timer"></div>
  <button class="start-timer">Start timer</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>

Upvotes: 1

Related Questions