Я тут таймер сделал, но почему то когда я переключаю окно на что-то другое, таймер останавливается. В чем проблема?

Question

[Snowfall_Zh]

Это из-за браузера или кода? Таймер останавливается и если переключиться на другие приложения в компе, если вернутся на страницу с таймером то она опять запускается. Браузер Google chrome версия 116.0.5845.141

let hourBlock = document.querySelectorAll('.hour')
let minBlock = document.querySelectorAll('.min')
let secBlock = document.querySelectorAll('.sec')
let milliBlock = document.querySelectorAll('.milli')



let startTimer = document.querySelector('.btn_start')
let stopTimer = document.querySelector('.btn_stop')
let clearTimer = document.querySelector('.btn_clear')


let milli = 0
let sec = 0
let min = 0
let hour = 0
let deg = 0

let t


startTimer.addEventListener('click', ()=>{    
    
    t = setInterval(function(){
        timerHand.style.transform = `rotate(${deg+=0.06}deg)`
        milli +=1
        timer[3].innerHTML = milli
        if(milli == 99){
            milli = -1
        } 
        if (milli == 0){
            if(sec < 9 ){
                timer[2].innerHTML = "0" + (sec += 1)
            } else{
                timer[2].innerHTML = sec += 1
            }
        }
        if (sec == 60){
            timer[2].innerHTML = '0' + (sec = 0)
            deg = 0
            if(min < 9 ){
                timer[1].innerHTML = '0' + (min += 1)
            } else{
                timer[1].innerHTML = min += 1
            }
        }
      
        if (min == 60){
            clearInterval(t)
        }
    },10)

    startTimer.setAttribute('disabled', '');
});

Answer 1

[Александр Талалаев]

Так задумано. Неактивные вкладки имеют низкий приоритет, поэтому там не гарантируется исполнение в риалтайме js.
Выход переписать например на webworker.
В целом тема обширная, можешь гуглить JavaScript inactive tabs

Comments

[Snowfall_Zh]

Спасибо

Answer 2

[Сергей Соколов]

Неактивные вкладки экономят ресурсы и таймеры в них срабатывают раз в 10 реже.

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

Часы лучше делать вычисляемыми. Запустили — запомнили время (до которого отсчёт).
Сработал очередной «тик» — посчитали, где мы сейчас: Date.now() и сколько сейчас времени до времени-Ч. И это отрисовали.

Answer 3

[Загир Меджидов]

Твой код ужаснее чем мой в старте изучения...

Comments

[Snowfall_Zh]

А чем? Давай конкретики, будет полезно узнать.

[Загир Меджидов]

Snowfall_Zh, ты каждые 10сек. вызываешь функцию которая нагружает сайт. Ты добавляешь секунды вручную, хотя можно использовать new Date().

Пример использования:

const date = new Date();
let seconds = date.getSeconds()
let minutes = date.getMinutes()
let hours = date.getHours()

console.log(`${hours}:${minutes}:${seconds}`)

Документация: Mozilla

[Snowfall_Zh]

Загир Меджидов, Я там оказывается не правильно описание написал. Это код не таймера, а секундомера. Кек.

[Загир Меджидов]

Snowfall_Zh, Из-за этого и получили не правильный ответ. Секундомер можно сделать так же использую new Date();

Пример кода ниже:

let sec_start = new Date().getSeconds()
// ожидание 10 «тиков»
let sec_minus = new Date().getSeconds()
let result = sec_start - sec_minus
// записываем на сайте.