interval של JS מתעצל במלאכתו

[שלום עולם 0]

בניתי את הסקריפט החמוד הזה ‏‏טיימר שעות עבודה - עותק.html, ולכאורה הכל בסדר, אבל להפתעתי אחרי שעבדתי שעה הוא מציג חמש דקות...

מתברר שאחרי 75 שניות פעילות, ה-interval מתחיל להאט את פעילותו ולפעום אחת לשתי שניות, שלוש, עשר, והלאה.

מצורף הקוד המלא, העיקר בשורות 20 ומטה, ו-37 ומאה.

       let timeElement = document.querySelector('#time'),
            fractionalHoursElement = document.querySelector('#fractional-hours'),
            hoursInputElement = document.querySelector('#hours-input'),
            minutesInputElement = document.querySelector('#minutes-input'),
            runButton = document.querySelector('#run'),
            stopButton = document.querySelector('#stop'),
            clearButton = document.querySelector('#clear'),
            setTimeButton = document.querySelector('#set-time'),
            hoursIncrementButton = document.querySelector('#hours-increment'),
            hoursDecrementButton = document.querySelector('#hours-decrement'),
            minutesIncrementButton = document.querySelector('#minutes-increment'),
            minutesDecrementButton = document.querySelector('#minutes-decrement'),
            myTimerInterval,
            timer = Number(localStorage.timer) || 0,
            isRunning = false;

        function start() {
            if (isRunning) return;
            isRunning = true;
            myTimerInterval = setInterval(() => {
                timer++;
                updateStorage(timer);
                updateDisplay();
            }, 1000);
        }

        function updateStorage(t) {
            localStorage.timer = t;
        }

        function updateDisplay() {
            let hours = Math.floor(timer / 3600);
            let minutes = Math.floor((timer % 3600) / 60);
            let seconds = timer % 60;
            let fractionalHours = (timer / 3600).toFixed(2);

            updateTimer(hours, minutes, seconds);
            updateFractionalHours(fractionalHours);
	    if (seconds === 0) {
	    hoursInputElement.value = hours;
            minutesInputElement.value = minutes;
		}
        }

        function updateTimer(h, m, s) {
            let hoursStr, minutesStr, secondsStr;

            if (h < 100) {
                hoursStr = h.toString().padStart(2, '0') + ":";
            } else {
                hoursStr = h.toString() + ":";
            }

            minutesStr = m.toString().padStart(2, '0') + ":";
            secondsStr = s.toString().padStart(2, '0');

            timeElement.innerText = hoursStr + minutesStr + secondsStr;
        }

        function updateFractionalHours(fh) {
            fractionalHoursElement.innerText = `${fh} שעות`;
        }

        function stop() {
            if (!isRunning) return;
            clearInterval(myTimerInterval);
            isRunning = false;
        }

        function clearTimer() {
            if (timer === 0) return;
            if (confirm("ביקשת לאפס את הטיימר. האם אתה בטוח?")) {
                stop();
                timer = 0;
                updateStorage(timer);
                updateDisplay();
            }
        }

        function setTime() {
            let hours = parseInt(hoursInputElement.value, 10) || 0;
            let minutes = parseInt(minutesInputElement.value, 10) || 0;

            if (isNaN(hours) || isNaN(minutes) || hours < 0 || minutes < 0 || minutes >= 60) {
                alert("אנא הזן זמן תקין");
                return;
            }

            timer = (hours * 3600) + (minutes * 60);
            updateStorage(timer);
            updateDisplay();
        }

        function incrementHours() {
            let hours = parseInt(hoursInputElement.value, 10) || 0;
            hoursInputElement.value = hours + 1;
        }

        function decrementHours() {
            let hours = parseInt(hoursInputElement.value, 10) || 0;
            if (hours > 0) {
                hoursInputElement.value = hours - 1;
            }
        }

        function incrementMinutes() {
            let minutes = parseInt(minutesInputElement.value, 10) || 0;
            if (minutes < 59) {
                minutesInputElement.value = minutes + 1;
            }
        }

        function decrementMinutes() {
            let minutes = parseInt(minutesInputElement.value, 10) || 0;
            if (minutes > 0) {
                minutesInputElement.value = minutes - 1;
            }
        }

        document.addEventListener('DOMContentLoaded', start);

        runButton.addEventListener('click', start);
        stopButton.addEventListener('click', stop);
        clearButton.addEventListener('click', clearTimer);
        setTimeButton.addEventListener('click', setTime);
        hoursIncrementButton.addEventListener('click', incrementHours);
        hoursDecrementButton.addEventListener('click', decrementHours);
        minutesIncrementButton.addEventListener('click', incrementMinutes);
        minutesDecrementButton.addEventListener('click', decrementMinutes);

[שלום עולם 0]

ראיתי שהשאלה נשאלה ב-stack overflow אך אין שם תשובה משכנעת. לפי המוסבר שם, שום שעון js לא אמור לעבוד.

[שלום עולם 0]

מעדכן שהסתדרתי על ידי אובייקט Date. אמנם התמיהה במקומה עומדת, אבל הבעיה המעשית נפתרה.

[yossiz]

@שלום-עולם-0 בדיוק באתי לכתוב שתחשבן עם Date כמה זמן עבר
התשובה למה setInterval לא טוב הוא כי אין הבטחה שזה יקרה פעם בשניה
עיין כאן (מדובר על setTimeout אבל זה רלוונטי גם עבור setInterval)
נראה לי שעיקר מה שנוגע אליך זה שהדפדפן עלול להשבית את הinterval אם הכרטיסייה לא פעילה

[Mordechai 0]

אגב חבר יקר כתב תוכנה (C#) למאפית מצות לחישוב ה-18 דקות על בסיס הinterval
לאחר שבוע המשגיח בדק את השעון ונהיה שם בלגןןן
בסוף הוא פתר את זה כמוך וכמו כולם ע"י הdatetime
בקיצור זה כנראה בכל השפות

[שלום עולם 0]

@yossiz כתב בinterval של JS מתעצל במלאכתו:

נראה לי שעיקר מה שנוגע אליך זה שהדפדפן עלול להשבית את הinterval אם הכרטיסייה לא פעילה

כבר רשמתי את הדף ברשימת הדפים שאין להשביתם, והבעיה נשארה עד שעשיתי כנ"ל.