Как сделать более точный таймер в js?

Question

[Роман]

Здравствуйте. Решил сделать себе таймер POMODORO. Это таймер, который отрабатывает определенную последовательность из разных временных интервалов, и подает сигнал в конце каждого периода.
Я сделал веб-страничку, на ней таймер на setTimeout'ах. В свернутой вкладке браузера почти перестает работать. Сделал порт на десктоп - та же фигня. Вообще, реально сделать на JS рабочую версию такого приложения?
Если код ниже недостаточно понятен без контекста (извините, я только учусь), вот: гитхаб

const createNewTimer = async (currentPeriod = 0) => {
  const current = timeTable[currentPeriod];

  for (let counter = Math.floor(current.time * 60); counter >= 0; counter -= 1) {
    changeTimeInPomodoro(counter)
    const currentTime = getTimeInMs();
    await new Promise(resolve => {
      setTimeout(() => resolve(), correctedTimeout(currentTime));
    })
    if (!state.timerOn) { 
      clearTimeout(changeTimeInPomodoro);
      counter = 0;
      return counter = 0;
    }
    if (counter <= 0 && state.timerOn) {
      createNewTimer(currentPeriod + 1);
    }
  }
}


const correctedTimeout = (prevTickTime) => {
  const now = new Date();
  const currTickTime = now.getMilliseconds();
  const newTimeout = 1000 - (currTickTime - prevTickTime);
  return newTimeout < 0 ? 0 : newTimeout;
}

Answer 1

[Денис Инешин]

Фича таймаутов в том что браузер замедляет их работу в неактивных вкладках для экономии ресурсов. До 1 раза в секунду если мне не изменяет память.

Соответственно ваша задача не создавать кучу интервалов и ждать как они отработают.

А создать start_timestamp и пачку breakpoint_timestamp(s). А потом запустить простейший setInterval и раз в секунду проверять разницу между текущем временем, стартовым временем и брейкпоинтами.

Comments

[Роман]

Спасибо, немного помучался, но в результате, кажется, достиг подходящего результата!