Поясните пару моментов кода JavaScript, если не сложно. Счетчик времени

Рейтинг: 0Ответов: 1Опубликовано: 01.06.2023

startdate = new Date();
clockStart = startdate.getTime();

function initStopwatch() 
{
var thisTime = new Date();
return (thisTime.getTime() - clockStart)/1000;
}

function getsecs() 
    {
      var tSecs = Math.round(initStopwatch());
      var iSecs = tSecs % 60;
      var iMins = Math.round((tSecs-30)/60);
      var sSecs ="" + ((iSecs > 9) ? iSecs : "0" + iSecs);
      var sMins ="" + ((iMins > 9) ? iMins : "0" + iMins);
      document.getElementById("timer-counter").innerHTML ="Вы находитесь на сайте: "+ sMins+":"+sSecs +" минут/секунд.";
      setTimeout('getsecs()', 1000);
    }

  • var iMins = Math.round((tSecs-30)/60); ⬅ зачем тут вычитается 30
  • setTimeout('getsecs()', 1000); ⬅ не стоит ли тут лучше использовать setInterval и почему.
javascript
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

  1. Math.round((tSecs-30)/60) соответствует Math.floor(tSecs / 60). Вообще Math.round(x - 0.5) === Math.floor(x). Автор кода этого не знает, выкручивается как умеет.

  2. Из-за setTimeout время на экране обновляется чуть реже чем раз в секунду и иногда будет пропущена очередная секунда - время обновится через две секунды. У setInterval будет другая проблема: если вам не повезло и таймер запущен ровно на границе секунды, время на экране будет регулярно перескакивать через две секунды. Вероятность такой неудачи 1/1000, но она есть. Думается, для счётчика пребывания на странице лучше поведение с setTimeout.

P.S. Есть способ в котором таймер тикает почти гарантированно равномерно. Для этого в setTimeout подставляется такой интервал, что в следующий раз мы окажемся в начале секунды:

const timerCounter = startDate => {
    const start = startDate.getTime();
    const span = document.getElementById('timer-counter');
    
    const format = n => {
        const s = n.toString();
        return (s.length === 1) ? '0' + s : s;
    }
    
    const tick = () => {
        const interval_ms = new Date().getTime() - start;
        const interval_s = Math.floor(interval_ms / 1000);
        const mins = format(Math.floor(interval_s / 60));
        const secs = format(interval_s % 60);
        span.textContent = `Вы находитесь на сайте: ${mins}:${secs} минут/секунд.`;
        setTimeout(tick, 10 + 1000 - interval_ms % 1000);
    };
    
    tick();
};

timerCounter(new Date());
<span id="timer-counter"></span>