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

Javascript暂停计时器困境......无法计算它

1 个答案: