Noob_coder Noob_coder - 6 months ago 32
HTML Question

Reinitialize jquery countdown timer

I am creating a exam page in which count down timer is used for each question.the timer is reinitialized based on button click which fetch time for the next question from database table,i am using the below code for countdown timer,but the problem is each time i want to reinitialize it it does not working properly,sometime it's getting fast sometime not working..

<label style="text-align:center;">Question Time : <span id="time"></span></label>

var ttime = 0;
function loadQuestion(id){
$.ajax({
url: "Data.php",
method:"POST",
data:{q_id:id},
context: document.body,
success: function(response){
alert(response);
var obj = JSON.parse(response);
ttime = obj.ques_time;
});
}

function startTimer(duration, display) {
var timer = duration, minutes, seconds;
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) {
//timer = duration;

//do something
}
}, 1000);
}

jQuery(function ($) {
var fiveMinutes = 60 * ttime,
display = $('#time');
startTimer(fiveMinutes, display);
});


one last thing i need to mention i want to do some task when the time reaches 0.

Answer

Save the timer in a variable:

var timer = setInterval(function(){}, interval);

Then do:

clearInterval(timer);

Using the clearInterval, or clearTimeout function disables the interval, you then can reset it. To do this, all you need to do is setup a new timer.

Also, the interval parameter on the setInterval() function is in milliseconds, so 1000 means that the function will occur every second.

So, if you wanted to do a countdown for five minutes:

var minutes = 5;
var seconds = 0;

var timer; // Will hold the timer 



// Start the timer
$('#startBtn').click(function(){
  clearInterval(timer); // Just incase 
  
  timer = setInterval(function(){
    
      // This function will occur every second 
      if (seconds > 0)
      { 
          seconds--;
      } 
      else if (minutes > 0) 
      { 
          seconds = 59; 
          minutes--;
      } 
      else 
      {
        $('#time').html("Your time is up!");
      }  

      // Show the time left
      $('#time').html(minutes + ":" + seconds + " remaining");
 }, 1000);
});


// Reset the timer
$('#resetBtn').click(function(){
  
  // Clear the interval
  clearInterval(timer);
  
  // Reset time 
  minutes = 5;
  seconds = 0;

  // Show the time left
  $('#time').html(minutes + ":" + seconds + " remaining");
});




function countDown(){
// This function will occur every second 
  if (seconds > 0)
  { 
    seconds--;
  } 
  else if (minutes > 0) 
  { 
    seconds = 59; 
    minutes--;
  } 
  else 
  {
    $('#time').innerHTML = "Your time is up!";
  } 

  // Show the time left
  $('#time').innerHTML = minutes + ":" + seconds + " remaining";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time">5:00 remaining</div><br/>

<div id="startBtn">Click me to start!</div>
<div id="resetBtn">Click me to reset!</div>