CODEWITHSUNDEEP
javascriptreactjsreact-reduxfrontendcountdowntimer
Julietta
Julietta

Reputation: 23

How to sync countdown timer, same link in two separate tabs

I would like to know if there's a way to sync react countdown timer two different tabs, like below:

1:46          ||   1:52
first tab     ||   second tab

Thanks

Upvotes: 1

Views: 1299

Answers (1)

Wyck
Wyck

Reputation: 11730

Countdown timers, Generally Speaking

Typically a countdown timer is defined by choosing a due time at which the timer will reach zero. A relative countdown timer would define that due time using a calculation based on the current time. In other words, to set a timer for "10 seconds from now" where now is defined to be the moment at which the user clicks a start button, one would use code like this:

// In the start button's click handler
due = Date.now() + 120000 // 120000 is 2 minutes (120 s) expressed in milliseconds

This gets evaluated when you click the button. If you click the button again, the due time would be recomputed and the due time would be moved to be a moment 10 seconds into the future from the moment at which you clicked the button. In other words, the program will evaluate Date.now() again, and choose a new due time based on that.

Now to compute, at a given instant how much time is remaining, you can use the following computation:

remaining = due - Date.now()
// `remaining` contains number of milliseconds remaining until our countdown is due

This will be a positive number in the moments before the timer is due, and will be negative if evaluated after the moment the timer is due. And, if you happen to be really lucky, you might catch it at the exact moment it is due and remaining would be exactly zero.

Typically a countdown timer will periodically update (change the value it is displaying) at least once a second, although possibly with greater frequency (could show tenths of a second remaining, or even milliseconds) or possibly with lower frequency (you could choose to update the display only once per minute).

To update the display you would use a JavaScript interval timer in the client. The frequency of this timer just governs how often you want to update the display and has nothing to do with its due-time or the precision with which you display the remaining time (i.e. whether you show "2 min remaining" or "2:00 remaining" or "2:00.000" remaining) For a nice, precise display you could update 60 times per second (about the refresh rate of a typical display) or if you're only displaying to a precision of seconds, updating 10 times per second is likely often enough, depending on the application.

Example:

setInterval(() => {
  display(`${due - Date.now()} ms remaining`);
}, updateInterval);

display could be just console.log, or code to change the text of a DOM element, or it could be a React setState. Depends on your application. updateInterval might be 250 to update at a modest 4 times per second.

True story: I keep a paper wall calendar, but I don't flip the monthly page at exactly midnight. Sometimes I don't flip it until the 2nd or 3rd day of the month, actually, but I generally "poll" once every two or three days to see if it needs to be updated. I don't set an alarm to wake me up at midnight just to change my calendar. Generally checking once a day is good enough for me. A countdown timer works the same way.

Sync

To have two countdown timers that are intended to be synchronized, they must both be based on the same due time. And should both be updating frequently enough that you won't notice any discrepancies due to the display just being stale.

If you have two browser tabs on the same computer that should be synchronized, then it's sufficient to just tell the apps in both tabs the same due time. Each tab has access to the same system time via Date.now(). So each will be able to display how much time remains until the due time by computing due - Date.now().

As for your React countdown timer, I'm sure there's a way to set the due time as a JavaScript Date. Just make sure that the server sends the same due time to both tabs and it won't matter when each tab loads and starts the countdown timer because the client won't be assigning the value of the due date for the local display of the countdown timer based on Date.now(), it will receive the due time explicitly from the server.

The point is that it's up to the server to provide the due time for the timer. Two countdown timers that are destined to reach 0 at the same time are effectively the same logical. The displays will appear reasonably synchronized if they are kept up to date at a reasonable frequency.

Be careful to transmit the date to the client using UTC so there are no issues due to time-zone differences between server and client.

If you need help programming your React countdown timer to set it for a specific due date, then you should disclose which library/component you are using and show code for how you set the timer.

Upvotes: 2

Related Questions