如何同步倒计时计时器，同一链接在两个不同的选项卡中

Question

我想知道是否有一种方法可以同步反应倒计时计时器两个不同的标签，如下所示：

北京时间1:46 |北京1:52

第一个选项卡：||第二个选项卡

谢谢

Answer 1

一般来讲，倒计时计时器

通常，通过选择定时器将达到零的到期时间来定义倒计时定时器。相对倒计时定时器将使用基于当前时间的计算来定义该到期时间。换句话说，要将计时器设置为"10秒后“，其中now被定义为用户单击start按钮的时刻，可以使用如下代码：

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

当您单击该按钮时，将对其进行评估。如果您再次单击该按钮，将重新计算到期时间，并且该到期时间将从您单击该按钮的时刻移至未来10秒后的某个时刻。换句话说，程序将再次评估Date.now()，并在此基础上选择新的到期时间。

现在，为了计算在给定时刻还剩下多少时间，您可以使用以下计算：

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

在计时器到期之前的时刻，这将是一个正数，如果在计时器到期之后进行计算，则该值将为负数。而且，如果你碰巧真的很幸运，你可能会在它到期的确切时刻捕捉到它，remaining将恰好为零。

通常，倒计时计时器将至少每秒定期更新一次(更改其显示的值)，尽管可能会以较高的频率(可能显示剩余时间的十分之一秒，甚至毫秒)或较低的频率(您可以选择每分钟仅更新显示一次)。

要更新显示，您可以在客户端中使用JavaScript间隔计时器。此计时器的频率仅控制您想要更新显示的频率，而与其到期时间或显示剩余时间的精度无关(例如，您是否显示"2分钟剩余“、"2:00剩余”或“2:00.000剩余”)对于一个漂亮的、精确的显示，您可以每秒更新60次(大约是典型显示的刷新率)，或者如果您仅以秒的精度显示，则根据应用程序，每秒更新10次可能就足够了。

示例：

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

display可以只是console.log，也可以是更改DOM元素文本的代码，也可以是React setState。这取决于您的应用程序。updateInterval可能是250，以每秒4次的速度适度更新。

真实故事:我保留了一个纸质挂历，但我不会在午夜整的时候翻阅月度日历。实际上，有时我直到每月2号或3号才会翻转它，但我通常每两到三天“轮询”一次，看看是否需要更新。我不会把闹钟设在半夜叫醒我，只是为了改变我的日历。一般来说，每天检查一次对我来说已经足够了。倒计时计时器的工作方式与此相同。

同步

要有两个要同步的倒计时计时器，它们必须都基于相同的到期时间。而且两者都应该足够频繁地更新，这样你就不会注意到由于显示陈旧而产生的任何差异。

如果您在同一台计算机上有两个应该同步的浏览器选项卡，那么只需告诉这两个选项卡中的应用程序的到期时间相同就足够了。每个选项卡都可以通过Date.now()访问相同的系统时间。因此，每个人都可以通过计算due - Date.now()来显示离到期时间还有多少时间。

至于你的React倒计时计时器，我相信有一种方法可以将到期时间设置为JavaScript日期。只需确保服务器向两个选项卡发送相同的到期时间，并且当每个选项卡加载和启动倒计时器时都没有关系，因为客户端不会为本地显示的基于Date.now()的倒计时器分配到期日期值，它将显式地从服务器接收到期时间。

关键是，服务器需要为计时器提供适当的时间。注定同时达到0的两个倒计时定时器实际上是相同的逻辑。如果以合理的频率保持最新，则显示将看起来相当同步。

在使用UTC将数据传输到客户端时要小心，这样就不会因为服务器和客户端之间的时区差异而出现问题。

如果您需要帮助编程您的React countdown计时器以将其设置为特定的到期日期，那么您应该披露您正在使用的库/组件，并显示如何设置计时器的代码。