重新初始化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>