Javascript-форум - Быстрая первая секунда в таймере

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Быстрая первая секунда в таймере (https://javascript.ru/forum/misc/52574-bystraya-pervaya-sekunda-v-tajjmere.html)

Быстрая первая секунда в таймере

Первая секунда таймера слишком быстро проходит. Сразу после нажатия кнопки "Старт", без паузы отображается значение меньше чем было указано. Из-за чего это? И как исправить?

<!DOCTYPE html>
<html>
<head lang="ru">
    <meta charset="UTF-8">
    <title></title>
    <style>
         input {
                 width: 30px;
                 text-align: center;
         }

        button {
                 width: 53px;
        }

    <style>
</head>
<body>
    <div id="tim">
        <input id = "hours" type="text" placeholder="00"/>
        <input id = "minutes" type="text" placeholder="00"/>
        <input id = "seconds" type="text" placeholder="00"/>
    </div>
    <button id="start">Старт</button>
    <button id="stop">Стоп</button>
    <script>
          
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var setIntervalTimer;
var counter;
var rightToStart = true;

var hours = document.getElementById("hours");
var minutes = document.getElementById("minutes");
var seconds = document.getElementById("seconds");




var timer = function() {
    if (rightToStart) {
        var hInput = +hours.value;
        var mInput = +minutes.value;
        var sInput = +seconds.value;
        var today = new Date();
        var endTime = new Date(today.getFullYear(),
            today.getMonth(),
            today.getDate(),
            today.getHours() + hInput,
            today.getMinutes() + mInput,
            today.getSeconds() + sInput);

        if (hInput != 0 || mInput != 0 || sInput != 0) {
            counter = function () {
                var nowTime = new Date();
                var delta = endTime - nowTime;

                var h = Math.floor(delta / 3600000);
                delta = delta - h * 3600000;

                var m = Math.floor(delta / 60000);
                delta = delta - m * 60000;

                var s = Math.floor(delta / 1000);

                hours.value = format(h, 2);
                minutes.value = format(m, 2);
                seconds.value = format(s, 2);


            }
            setIntervalTimer = setInterval(counter, 50);
            rightToStart = false;
        }

}
}

function format(num, maxNumbers) {
    var numStr = num + '';
    while (numStr.length < maxNumbers) {
        numStr = '0' + numStr;
    }

    return numStr;
}

var clear = function(){
    rightToStart = true;
    clearInterval(setIntervalTimer);
}

start.addEventListener("click", timer);
stop.addEventListener("click", clear);
    </script>
</body>
</html>

1 секунда это 1000 миллисекунд. А у вас стоит 50 миллисекунд.

Я знаю, но ведь у меня время берется машинное и с частотой 50 миллисекунд проверяется разность времени между началом запуска таймера и текущим временем. Если установить в 1000 миллисекунд, то не отображается значение в 59 секунд, так как первый запуск функции произойдет через 1 секунду + погрешность.

Проблема только в первой секунде, в дальнейшем все хорошо. Она у меня получается 50 миллисекунд + время исполнения кода. Мне необходимо установить setTimeout() с задержкой определенной эмпирическим путем. Если время исполнения кода + 50 миллисекунд больше 500, то значение округляется вверх и значение 59 не выводится. Время исполнения кода всегда разное. Запутался.
Придется жертвовать первой секундой?

Первый раз функции в таймере выполнится спустя 50мс послезапуска. Соответственно от первой секунды останется 950мс и будет показано целое количество оставшихся секунд. Плюс у тебя там не указаны миллисекунды в endTime и поэтому будет еще одна погрешность на количество мс которые обнулились. В общем, компенсируй первую секунду и указывай миллисекунды:

<!DOCTYPE html>
<html>
<head lang="ru">
    <meta charset="UTF-8">
    <title></title>
    <style>
         input {
                 width: 30px;
                 text-align: center;
         }

        button {
                 width: 53px;
        }

  </style>
</head>
<body>
    <div id="tim">
        <input id = "hours" type="text" placeholder="00"/>
        <input id = "minutes" type="text" placeholder="00"/>
        <input id = "seconds" type="text" placeholder="00"/>
    </div>
    <button id="start">Старт</button>
    <button id="stop">Стоп</button>
    <script>
          
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var setIntervalTimer;
var counter;
var rightToStart = true;

var hours = document.getElementById("hours");
var minutes = document.getElementById("minutes");
var seconds = document.getElementById("seconds");




var timer = function() {
    if (rightToStart) {
        var hInput = +hours.value;
        var mInput = +minutes.value;
        var sInput = +seconds.value;
        var today = new Date();
        var endTime = new Date(today.getFullYear(),
            today.getMonth(),
            today.getDate(),
            today.getHours() + hInput,
            today.getMinutes() + mInput,
            today.getSeconds() + sInput + 1,
            today.getMilliseconds() );

        if (hInput != 0 || mInput != 0 || sInput != 0) {
            counter = function () {
                var nowTime = new Date();
                var delta = endTime - nowTime;

                var h = Math.floor(delta / 3600000);
                delta = delta - h * 3600000;

                var m = Math.floor(delta / 60000);
                delta = delta - m * 60000;

                var s = Math.floor(delta / 1000);

                hours.value = format(h, 2);
                minutes.value = format(m, 2);
                seconds.value = format(s, 2);


            }
            setIntervalTimer = setInterval(counter, 50);
            rightToStart = false;
        }

}
}

function format(num, maxNumbers) {
    var numStr = num + '';
    while (numStr.length < maxNumbers) {
        numStr = '0' + numStr;
    }

    return numStr;
}

var clear = function(){
    rightToStart = true;
    clearInterval(setIntervalTimer);
}

start.addEventListener("click", timer);
stop.addEventListener("click", clear);
    </script>
</body>
</html>

jsnb, Спасибо тебе.