シンプルなjavascriptを使用してsetintervalを一時停止してから再開する

Question

Timの単純なjavascript関数を使用しています。タイマーを再開して一時停止する必要があります。私はjavascriptに精通していないので、このための完璧なソリューションを得ることができませんでした。だから私を助けてください。

タイマーのための私のjavascript機能が

function start_time(){ 
var hrs = $('#hrs').val(); 
var min = $('#mins').val(); 
var sec = $('#sec').val(); 
var value = "00:00"; 
if (typeof $.cookie("hors") !== 'undefined') { 
    var hrs = $.cookie("hors"); 
    var min = $.cookie("mins"); 
    var sec = $.cookie("seco"); 
} 
if ($('#timer').length) { 
    var runningtime = setInterval(function(){ 
     document.getElementById("timer").innerHTML = pad2(hrs)+" : "+pad2(min)+" : "+pad2(sec); 
     if (sec < 00) { 
      hrs--; 
      sec = 60; 
      min = 60; 
     } 
     sec--; 
     if(sec == 00){ 
      min--; 
      sec = 60; 
      if(min == 00){ 
       hrs--; 
       min = 60 
      } 
     } 
     var strTime=$('#timer').text(); 
     arr = strTime.split(':'); 
     hour = parseInt(arr[0]); 
     mins = parseInt(arr[1]); 
     seco = parseInt(arr[2]); 
     $.cookie("hors", hour); 
     $.cookie("mins", mins); 
     $.cookie("seco", seco); 
     if (hrs < 0){ 
      clearInterval(runningtime); 
      document.getElementById("timer").innerHTML = "Time Up"; 
      $('.cover').css('display', 'block'); 
      $.removeCookie("hors"); 
      $.removeCookie("mins"); 
      $.removeCookie("seco"); 
     } 
    },1000); 
} 
function pad2(number) { 
    return (number.length < 2 ? '0' : '') + number 
} 

され、タイマをレンダリングするために私のHTMLは

<input type="hidden" name="" value="01" id="hrs"> 
<input type="hidden" name="" value="20" id="mins"> 
<input type="hidden" name="" value="30" id="sec"> 
<div id="timer"></div> 

Answer 1

あるJavaScriptでのsetInterval関数は、すべてのインターバルが経過時に提供される関数を呼び出します。あなたのコードは必要以上に複雑です。 1つの変数を使用してタイマーの進行状況を保存することをお勧めします。

// A Javascript Class example 
var Timer = function() { 
// SCOPE THE CLASS 
var self = this; 

// PROPERTIES 
self.timer; 
self.currentTime; 

// Start Timer 
self.startTimer = function() { 
    // Initialize the value of currentTime if not already set 
    if (self.currentValue == -1) { 
     // Get this value from a form, I notice that you are using multiple fields...you can add these values together after collecting them and multiply them to the value of a second 
     currentTime = $('#timer').val(); 
    } 
    // Start the interval, we have to save a reference to the interval in a class variable to stop the interval later 
    self.timer = setInterval(function() { 
     // Update your variable on every call 
     // A timer would start with the number of seconds and count down 
     // Your interval is a second, so every second, subtract a second 
     self.currentTime--; 
     // Update the value of the form with ID 'timer' 
     $('#timer').val(self.currentTime); 

     // Check if the timer has run out 
     if (currentTime <= 0) { 
      // Execute the anything you want to do when the time runs out (sound/display message?) 
      self.timerExpired(); 
     } 
    }, 1000); 
}; 

self.stopTimer = function() { 
    // An Interval can be stopped using the clearInterval() function 
    clearInterval(self.timer); 
    // Our class-wide variable self.currentTime will have the last value at the last interval executed 
} 

self.timerExpired = function() { 
    // Do what you need to when the time expires 
}; 

};