如何同步倒数计时器，两个独立选项卡中的相同链接

Question

我想知道是否有办法同步反应倒数计时器两个不同的选项卡，如下所示：

1:46 || 1:52
第一个标签 || 第二个标签

谢谢

Answer 1

倒数计时器，一般来说

通常，倒数计时器是通过选择计时器将达到零的到期时间来定义的。 相对倒数计时器将使用基于当前时间的计算来定义到期时间。 换句话说，要为“从现在起 10 秒”设置一个计时器，其中now定义为用户单击开始按钮的时刻，可以使用如下代码：

// 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()时间due - Date.now()来显示到到期时间due - Date.now()多少时间。

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

关键是由服务器为计时器提供到期时间。 两个注定同时达到 0 的倒数计时器实际上是相同的逻辑。 如果它们以合理的频率保持最新，则显示将显得合理同步。

请小心使用 UTC 将日期传输到客户端，以免因服务器和客户端之间的时区差异而出现问题。

---

如果您需要帮助编写 React 倒数计时器以将其设置为特定的截止日期，那么您应该公开您正在使用的库/组件并显示有关如何设置计时器的代码。