자바 스크립트가 타이머 문제를 일시 중지했습니다. 계산할 수 없습니다.

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