Как остановить местное время и запустить время по координатам?

Question

[kirillleogky]

У меня есть setInterval по текущему местоположению:

const timerId = window.setInterval(setCurrTime, 100);

setCurrTime

export default async function setTime(date = new Date()) {
  const time = document.querySelector('#time');
  const currDate = await date;

  let hours = currDate.getHours();
  let minutes = currDate.getMinutes();

  if (hours <= 9) hours = `0${hours}`;
  if (minutes <= 9) minutes = `0${minutes}`;

  time.innerText = '';
  time.innerText = `${hours}:${minutes}`;
}

Далее в коде я сбрасываю timerId:
clearInterval(timerId);


И далее я хочу запустить время, но с привязкой к определённому местоположению
Это у меня достигается данной функцией которую я передаю аргументом в функцию setCurrTime
setSearchTime(useGeocod(areaSearch))

Что конкретнее я хочу сделать:

• При загрузке страницы
  

  const timerId = window.setInterval(setCurrTime, 100);

  
  
• Потом при определённых условиях сбросить setInterval и установить новый
  

  clearInterval(timerId);
  window.setInterval(setCurrTime, 100, setSearchTime(useGeocod(areaSearch)));

  
  

setSearchTime(useGeocod(areaSearch)) - асинхронная функция, но возвращает всегда нужное время, но когда закидываю в новый setInterval, то устанавливается только одно время без обновления.

Как мне остановить один setInterval и запустить почти тот же, но с аргументом, и чтобы он обновлялся как первый?
Это важно, чтобы обновлялось, так как это функционал часов.

Comments

[Flying]

window.setInterval(setCurrTime, 100) - это у вас так часы реализованы?

[kirillleogky]

Flying, да
а потом все тоже самое вызывать но с аргументом

window.setInterval(setCurrTime, 100, setSearchTime(useGeocod(areaSearch)));

[Flying]

kirillleogky, вы к сожалению функцию setCurrTime не опубликовали, а это может быть важным. В зависимости от того как именно она реализована там могут быть разные сложности. А в целом общая идея здесь должна быть такой что вам стоит брать текущее время (new Date()) и преобразовывать его, к примеру устанавливая нужную time zone, возможно внося ещё какие-то правки в зависимости от задачи. Но НЕ ПЫТАЙТЕСЬ эмулировать часы через setInterval

[Flying]

Если за преобразование времени у вас будет отвечать отдельная функция, основанная на преобразовании текущего времени - тогда ваши прыжки между setInterval вам просто не понадобятся

[kirillleogky]

Flying, есть setCurrTime

export default async function setTime(date = new Date()) {
  const time = document.querySelector('#time');
  const currDate = await date;

  let hours = currDate.getHours();
  let minutes = currDate.getMinutes();

  if (hours <= 9) hours = `0${hours}`;
  if (minutes <= 9) minutes = `0${minutes}`;

  time.innerText = '';
  time.innerText = `${hours}:${minutes}`;
}

[kirillleogky]

Flying, а setSearchTime(useGeocod(areaSearch)) возвращает промис такого вида:

new Date(нужный год, нужный месяц, нужная дата, нужные часы, нужные минуты);

[Flying]

kirillleogky, Думал добавить комментарий, но получилось слишком много - написал в виде ответа.

Answer 1

[Flying]

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

Ваш текущий код работает по причине того что вы используете неявное создание нового объекта на каждый вызов через указание new Date() в качестве значения по-умолчанию. Это значение по-умолчанию вас и сбивает с толку т.к. оно выглядит как своеобразный генератор значений, хотя по факту им не является.

Кроме того await date тоже по факту работает не совсем так как вы (скорее всего) ожидаете. Из MDN: "If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise." Таким образом const currDate = await date в вашем случае эквивалентно const currDate = date.

Далее, следите за руками:

Сначала вы передаёте в setInterval функцию без дополнительных аргументов. Она работает по причинам, описанным выше.

Затем вы передаёте в setInterval() значение вызова setSearchTime() третьим аргументом (т.е. аргументом для интервальной функции). При этом, как вы сами пишете - функция setSearchTime() у вас возвращает Promise что по определению - обещание вернуть одно значение.

Таким образом когда вы передаёте этот третий аргумент - ваша функция начинает получает значение аргумента date (т.е. перестаёт отрабатывать генерация значения по-умолчанию). При первом вызове ваш Promise, переданный в качестве аргумента в интервальную функцию, переходит в состояние fulfilled и отдаёт значение, но дальше этого уже не будет происходить т.к. Promise уже в состоянии fulfilled, так что вы будете всегда получать одно и то же значение. Однако это будет происходить не потому что setInterval не работает, а потому что вы и передаёте одно значение.

Если вы (сами или из описания выше) понимаете как всё это работает на самом деле - то решение проблемы становится очевидным: вам всего лишь нужно передавать в вашу функцию setCurrTime не значение времени, а функцию-генератор времени. Тогда её вызов на каждой итерации будет приводить к созданию нового значения времени и всё начнёт работать.

Также пара замечаний которые не относятся непосредственно к вашему вопросу, но являются важными:

1. Ваша функция отображает время с точностью до минуты, но вызывается каждые 100 миллисекунд. Таким образом она 600 раз генерирует одно и то же значение что, очевидно, неразумно
   
2. Сама функция преобразования времени у вас не показана, но важно чтобы эта функция не опиралась на setInterval в качестве источника информации о количестве прошедшего времени. Вместо этого вы должны всегда отталкиваться от new Date() и модифицировать этот объект. В качестве примера почему так попробуйте себе представить что компьютер с браузером в котором запущен ваш скрипт, был отправлен в гибернацию на какое-то время, а потом вернулся назад
   

Comments

[kirillleogky]

Flying
c setInterval я полностью согласен, но в интернете я не смог найти как люди в реальности создают часы на странице которые каждую минуту обновляются при этом не используя setInterval или setTimeout

или я не смог найти или плохо искал((

[Flying]

kirillleogky, Нет никакой проблемы с тем чтобы использовать setInterval в качестве механизма обновления. Важным здесь является не использование setInterval как источника времени. Т.е., грубо говоря, вот так делать нельзя ни в коем случае (а я видел подобные реализации):

let clock = [12,23,34];
setInterval(() => {
// .. как-то выводим часы и минуты
// а затем обновляем данные в часах
clock[2] = ++clock[2] % 60;
if (clock[2] === 0) {
  clock[1] = ++clock[1] % 60;
  if (clock[1] === 0) {
    clock[0] = ++clock[0] % 24;
  }
}
}, 1000);

сам подход к тому чтобы брать данные из Date - правильный, использование setInterval для обновления - правильно, но вы запутались в нюансах работы ряда механизмов JavaScript, что и привело к проблеме. И она, как вы, надеюсь, поняли, не в самом setInterval, а в том как вы обращаетесь с источниками данных.

Для реализации мировых часов вам по сути было бы достаточно использовать какой-нибудь timezone или что-то подобное т.к. Date() в JavaScript не позволяет напрямую оперировать временными зонами.

[kirillleogky]

Flying,
спасибо
я сделал так:
взял по координатам город, его страну, данные связанные со временем и узнал разницу в часах, а потом просто сделал clearInterval и снова его запустил с new Date(), но только new Date() минус количество часов в другом городе и просто обновляю

скинуть?

[Flying]

kirillleogky, Вам необязательно прерывать setInterval, в целом функции отображения времени не нужно знать откуда и как это время берётся. Вы ведь не перезапускаете свои часы при переезде в другой часовой пояс, просто подстраиваете время.

Если хотите показать код - покажите, конечно. Работа с датами на практике сильно сложнее чем может показаться если делать её корректно.

[kirillleogky]

Flying,
index.js

let timeDifference = 0;
let timerId = window.setInterval(setCurrTime, 3000, timeDifference);

чуть-чуть попозже в коде

window.onclick = async (event) => {
  if (event.target === document.querySelector('.search_menu_block-submit')) {
    const areaSearch = document.querySelector('.search_menu_block-input').value;
    const currForecast = await getForecast(useGeocod(areaSearch));
    
    timeDifference = await getTimeDifference(setSearchTime(useGeocod(areaSearch)));
    timerId = window.setInterval(setCurrTime, 3000, timeDifference);
  }
};

[Flying]

kirillleogky, Другими словами то что я писал вы проигнорировали почти целиком ...

[kirillleogky]

Flying, мне тяжело понять про функцию-генератор времени передаваемый параметром

[Flying]

const getTime = () => new Date(); // Здесь, конечно же, можно производить модификации даты перед выдачей
window.setInterval(setCurrTime, 3000, getTime); // Не вызов, а именно передача функции!
// и внутри setCurrTime:
...
const date = date(); // обращение к функции, переданной в качестве аргумента с именем "date"