Javascriptはタイマーの不具合を一時停止しています...それを計算できません

Question

キューで開始、一時停止、再開するように設計された一連のタイマーを作成しました。タイマーが立ち上がると、自分のページ上の数字が動的に更新されます。私が持っている問題は、タイマーを一時停止する前に中断したところからタイマーを開始する方法を考え出すことです。私は一から再起動することができますが、一時停止を取る方法がわかりません。Date.now()の値を入力し、正しい値を表示するために数式に入力してください。それは私がちょうど把握できない何か愚かなものになります。

function ticking2(num) { 

//IF TIMER IS PAUSED CANCEL THE ANIMATION FRAME 
    if (timerObjArray[num].paused == true) { 

    timerObjArray[num].restartTime = Date.now(); 

    cancelAnimationFrame(id); 

    } else if (timerObjArray[num].paused == false) { 

    timerObjArray[num].initialTime = Date.now() 

      if (timerObjArray[num].restartTime != 0) { 


//THIS IS THE LINE WHERE I AM HAVING TROUBLE 

      timerObjArray[num].milli = ((timerObjArray[num].initialTime - timerObjArray[num].initialDate) - (timerObjArray[num].initialTime - timerObjArray[num].restartTime))/1000; 


      } else { 


      timerObjArray[num].milli = ((timerObjArray[num].initialTime - timerObjArray[num].initialDate )/1000); 

      } 

      //THIS FUNCTION TAKES THE MS VALUE AND CONVERTS IT TO HH:MM:SS 
      convert(num, timerObjArray[num].milli * 1000); 


    id = requestAnimationFrame(function() { 

     ticking2(num); 

    }); 

    } 

} 

ありがとうございました。

Answer 1

私は十分な情報がありませんので、私は簡単な実装を行いました。これを見れば、何が欠けているかを判断するのに役立ちます。あなたはそれを歓迎します。

Timer fiddle

ユーティリティ：

var timer = (function() { 
    let _timers = {}; 

    let pub = { 
     start : function(id) { 
      if(!_timers[id]) _timers[id] = {on:true, intervals:[{start:new Date()}] }; 
      else if(_timers[id].on) throw 'timer is already started: ' + id; 
      else { 
       _timers[id].on = true; 
       _timers[id].intervals.push({start:new Date()}); 
      } 
     }, 
     stop : function(id) { 
      if(!_timers[id]) throw 'timer does not exist, cannot be stopped: ' + id; 
      else if(!_timers[id].on) throw 'timer is already stopped: ' + id; 
      else { 
       _timers[id].on = false; 
       let interval = _timers[id].intervals[_timers[id].intervals.length -1]; 
       interval.stop = new Date(); 
       interval.total = interval.stop - interval.start; 
      } 
     }, 
     read : function(id) { 
      if(!_timers[id]) throw 'timer does not exist, cannot be read: ' + id; 
      let total = 0; 
      for(let i=0; i<_timers[id].intervals.length; i++) { 
       if(_timers[id].intervals[i].total) total += _timers[id].intervals[i].total; 
       else total += (new Date()) - _timers[id].intervals[i].start; 
      } 
      return { intervals:_timers[id].intervals, total: total }; 
     }, 
     delete: function(id) { 
      if(!_timers[id]) throw 'timer does not exist, cannot be deleted: ' + id; 
      delete _timers[id]; 
     } 
    }; 
    return pub; 
})(); 

使用例：

$('.start').on('click', function(){ 
    timer.start(123); 
}); 
$('.stop').on('click', function(){ 
    timer.stop(123); 
}); 
$('.clear').on('click', function(){ 
    timer.delete(123); 
    $('input').val(''); 
}); 
setInterval(function(){ 
    let result = null; 
    try//obviously not a great pattern 
    { 
    result = timer.read(123); 
    } catch(ex){} 
    if(result) { 
     $('input').val(result.total); 
    } 
}, 35);