Javascript секундомер/таймер прыгает

Question

У меня есть таймер javascript, который работает некорректно. Когда я вставляю его в свой браузер, секунды немного отскакивают. Я считаю, что это может быть связано с тем, что миллисекунды не преобразуются правильно в секундах/минутах/часах, но я не уверен. Вот мой код:

var link = userLink + '/games/' + $scope.currentGame; 
     ref.child(link).once('value', function(snapshot) { 
     var game = snapshot.val(); 
     var startTime = Date.parse(game.started); 
     var timeNow = Date.now(); 
     var timeLapsed = (timeNow - startTime); 
     var mydate = new Date(timeLapsed); 
     var humandate = mydate.getUTCHours()+ " hours, " + mydate.getUTCMinutes()+ " minutes and " + mydate.getUTCSeconds()+ " second(s)"; 
     console.log(humandate); 
     console.log(mydate.getUTCHours()) 
     var timeVar = document.getElementById('timer'), seconds = mydate.getUTCSeconds(), minutes = mydate.getUTCMinutes(), hours = mydate.getUTCHours(), time; 

     function add() { 
     seconds++; 
     if (seconds >= 60) { 
      seconds = 0; 
      minutes++; 
      if (minutes >= 60) { 
       minutes = 0; 
       hours++; 
      } 
     } 
     timeVar.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + 
     ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + 
     ":" + (seconds > 9 ? seconds : "0" + seconds); 
     timer(); 
     } 
     function timer() { 
     var time = setTimeout(add, 1000); 
     } 
     timer(); 

    }); 

Начальное время запуска хватает из firebase базы данных по стойкости (таймер предназначен как часть игры), а затем следующие функции приращения времени. Любая помощь будет оценена по достоинству. Благодарю.

Answer 1

Эта линия:

var time = setTimeout(add, 1000); 

не выполняет каждый второй, но каждый «код времени выполнения + 1 второй» интервал, так что по крайней мере несколько миллисекунд за секунду. Чем дольше работает код, тем он будет менее точным. Попытайтесь использовать setIntervalодин раз вместо того, чтобы звонить setTimeoutкаждую секунду, так как он срабатывает, когда вы ожидаете его.

Answer 2

Вы не можете полагаться на setTimeout для подсчета секунд (или времени в целом). setTimeout просто отложил выполнение функции для как минимум количество времени (в миллисекундах), которое вы задали. Таким образом, в вашем случае может случиться, что функция «добавить» запускается через 1,5 секунды. Причина этого в том, что JavaScript работает в том же потоке, что и пользовательский интерфейс, и это означает, что если есть какая-то задача для потока пользовательского интерфейса, он будет выполнять вашу функцию. setInterval также не будет делать трюк по той же причине.

Что вы хотите сделать, это использовать объект времени, чтобы узнать, сколько дат действительно прошло с момента последнего вызова функции.