How to stop local time and start time by coordinates?

Question

JavaScript

I have setInterval on current location:

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}`;
}

Further in the code, I reset the timerId:
clearInterval(timerId);
And then I want to start the time, but with reference to a specific location
. This is achieved by this function, which I pass as an argument to the setCurrTime function.
setSearchTime(useGeocod(areaSearch))
More specifically, I want to do:

• On page load
  

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

  
  
• Then, under certain conditions, reset setInterval and set a new one
  

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

  
  

setSearchTime (useGeocod (areaSearch)) is an asynchronous function, but it always returns the right time, but when I throw it into a new setInterval, only one time is set without updating.
How can I stop one setInterval and run almost the same one but with an argument and have it update like the first one?
This is important to keep up to date, as this is the functionality of the watch.

Answer 1

The error is quite obvious, although it is spread over the code. However, the reason for its appearance is that you have a poor understanding of the mechanisms that you are trying to use. In other words, this is not a technical error, but an error from a lack of knowledge.
Your current code works because you use the implicit creation of a new object on each call via new Date()a default value. This is the default value and is confusing for you. it looks like a kind of value generator, although in fact it is not.
In addition await date, in fact, it also does not work quite the way you (most likely) expect. From MDN : "If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise." Thusconst currDate = await datein your case is equivalent to const currDate = date.
Next, watch your hands:
First, you pass to setIntervalthe function with no additional arguments. It works for the reasons described above.
You then pass in the setInterval()value of the call as the setSearchTime()third argument (i.e. the argument for the interval function). At the same time, as you yourself write - setSearchTime()your function returns Promisewhat, by definition, is a promise to return one value.
So when you pass this third argument - your function starts getting the value of the argumentdate(i.e., the generation of the default value ceases to work). On the first call, your Promise, passed as an argument to the interval function, goes into the fulfilled state and returns a value, but this will no longer happen. The promise is already in the fulfilled state, so you will always get the same value. However, this will happen not because it setIntervaldoes not work, but because you are passing one value.
If you (yourself or from the description above) understand how it all really works, then the solution to the problem becomes obvious: you just need to pass to your function setCurrTimenot a time value , but a generator functiontime. Then its call at each iteration will lead to the creation of a new time value and everything will start working.
Also a couple of notes that are not directly related to your question, but are important:

1. Your function displays the time to the minute, but is called every 100 milliseconds. So it generates the same value 600 times, which is obviously unreasonable.
   
2. The time conversion function itself is not shown, but it is important that this function does not rely on setIntervalas a source of information about the amount of time elapsed. Instead, you should always build on new Date()and modify this object. As an example of why this is so, try to imagine that the computer with the browser running your script was hibernated for a while and then came back