Как сделать повторение таймера?

79
16 марта 2022, 16:30

У нас есть таймер обратного отсчёта.

let timerDate = new Date("Jan 29, 2020 00:00:00").getTime();

И функция

let timerFunction = setInterval(()=>{
   let now = new Date().getTime();
   let distance = timerDate - now;
//считаем дни, часы, секунды, выводим на страницу
  if (distance < 0){
    console.log('Время закончилось');
   }

}, 1000);

Подскажите пожалуйста, как сделать так, чтобы когда время заканчивалось, автоматически устанавливалась новая дата, на 1 день больше.

Например сейчас

let timerDate = new Date("Jan 29, 2020 00:00:00").getTime();

Но когда время выйдет, оно автоматически станет

let timerDate = new Date("Jan 30, 2020 00:00:00").getTime();

Я думал, что можно сделать как-то через setTime() через милисекунды, но у меня не получилось.

Заранее спасибо всем, кто поможет!

Answer 1

Если вам не подошел ответ Игоря, вот работающее решение в рамках вашей функции.

Почитайте комментарии, вся логика и объяснение вынесены в код.

var timerDate = new Date("Jan 22, 2020 00:00:00").getTime(); 
// делаем переменную глобальной, чтобы дальше её менять через цикл. 
 
var now = new Date().getTime(); 
// выносим из setInterval и делаем глобальной 
 
// пишем цикл, который проверяет чтобы timerdate был больше чем "сейчас". 
// Пока этого не происходит он увеличивает таймер на сутки в миллисекундах 
// (так работает UNIX timestamp - в миллисекундах). 
 
while (timerDate < now) { 
  console.log('Проверяем timerDate - сейчас это временная метка из прошлого, её нужно увеличить.'); 
  timerDate = timerDate + 86400000; 
  console.log('Увеличиваем timerDate на сутки. Теперь значение:' + timerDate); 
  // просто показываю что дата каждый раз увеличивается на сутки,  
  // пока не станет нужной. (итого 7 увеличений). 
} 
 
let timerFunction = setInterval(() => { 
 
  let distance = timerDate - now; 
  //считаем дни, часы, секунды, выводим на страницу 
 
  if (distance < 0) { 
    console.log('Время закончилось'); 
 
    // в реальных условиях никогда не закончится,  
    // т.к. цикл в начале при загрузке страницы не позволит быть timerDate < now,  
    // однако если у пользователя будет открыт сайт больше суток можно добавить сюда увеличение. 
 
    timerDate = timerDate + 86400000; 
 
    // На случай если браузер открыт больше суток на вашей странице.  
    //Тогда таймер дойдет до нуля, обновится и снова пойдет отсчитывать от 24 часов 59 минут и 59 секунд. 
 
  } 
 
 
}, 1000);

Answer 2
let timerDate = new Date("Jan 29, 2020 00:00:00");
...
let distance = timerDate.getTime() - now;
...
timerDate.setDate(timerDate.getDate() + 1);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setDate

READ ALSO
Как правильно вызвать action в redux?

Как правильно вызвать action в redux?

У меня есть метод getColor

95
Стилизация конкретного ScrollBar

Стилизация конкретного ScrollBar

Возможно ли стилизовать ScrollBar у определённого элемента? К примеру я открываю на сайте модальное окно и чтобы в нём скролл отличался от того,...

58
Как перекрыть одно событие другим

Как перекрыть одно событие другим

Есть скрипт для блоков div: при наведении на блок1 в соседнем блоке2 отображается скрытый блок, аналогично при наведении блок2 в первом блоке1...

68