重新初始化jquery倒数计时器

Question

我正在创建一个考试页面，其中每个问题都使用倒数计时器。计时器根据按钮单击重新初始化，该按钮从数据库表中获取下一个问题的时间，我使用下面的代码进行倒数计时器，但是问题是每次我想重新初始化它时它都不能正常工作，有时它会变得很快有时不工作..

<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);
    });

最后一件事我需要提一下，我想在时间达到 0 时执行一些任务。

Answer 1

将计时器保存在变量中：

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

然后做：

clearInterval(timer);

使用 clearInterval 或 clearTimeout 函数禁用间隔，然后您可以重置它。 为此，您需要做的就是设置一个新计时器。

另外，setInterval()函数的interval参数是以毫秒为单位的，所以1000表示该函数每秒都会发生一次。

所以，如果你想倒计时五分钟：

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>