Как сделать таймер обратного отсчёта на JS?

Question

[danilr]

Есть начальное количество секунд, const delay = 300. Нужно каждую секунду выводить оставшееся время. Если каждую секунду в setInterval вычитать по единицы, то если вкладка станет не активной, браузер может замедлить этот счётчик, что приведёт к несоответствию времени.
Есть идея исходить от текущего времени - и времени запуска таймера.
const startTime = new Date(). Но как это правильно реализовать? И ещё вопрос, как из даты получить время в секундах? Без миллисекунд, чтобы просто обрубал последние 3 цифры, а не делить на 1000 и округлял?

Answer 1

[Антон Неверов]

https://www.w3schools.com/howto/howto_js_countdown.asp - setInterval абсолютно нормально работает.

Метку времени unix нельзя выводить не в миллисекундах, поэтому делите всегда на 1000.

Comments

[danilr]

Работает как должен работать только когда вкладка активна, если нет, то браузер может замедлять вызов функции

[Антон Неверов]

danilr, да, верно. Для того, чтобы и без вкладки работало всё - нужно не убавлять секунду, а каждую секунду высчитывать оставшееся время от изначальной метки времени.

Answer 2

[danilr]

Лучшее решение - это записать в константу в момент старта счётчика время, потом каждую секунду высчитывать время текущее и сколько осталось.

const delay = 300000; // 300 секунд таймера (5 мин), статичное и не меняется
const resentDelay = 30000; // начальное время остаточного времени счётчика и постоянно уменьшается:
const timeStart = Date.now(); // время когда счётчик запустился (тип number в миллисекундах)
const currentDelay = Math.round( (resentDelay - (Date.now() - timeStart))/1000 ); /* вычисляем оставшееся время счётчика, вычисление это делаем каждую секунду в  setInterval*/