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

1最後の事は、私は時にいくつかのタスクを実行したい..私はそれがいつかそれが機能していないいつか速くなってきて、正常に動作していないことを再初期化するたびにあります時間は0になります。

Answer 1

変数にタイマを保存します。

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

は次にんてclearInterval、またはてclearTimeout機能を使用して

clearInterval(timer); 

は間隔を無効にし、あなたはそれをリセットすることができます。 これを行うには、新しいタイマーを設定するだけです。

また、setInterval（）関数のintervalパラメータは、ミリ秒になります。したがって、1000は、関数が毎秒発生することを意味します。あなたは5分間のカウントダウンをやってみたかった場合

ので、：

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>