实时更新页面中多个倒数计时器的最佳方法

Question

好的，我有一个简单的问题。 因此，我有一个正在开发的网站，它将列出多个匹配项，但我想显示10分钟的超时时间。如果倒数计时器在创建后的10分钟内结束，则它将取消游戏。我不需要实际的代码来取消游戏或类似的帮助，而仅仅是指导什么是最好的方法。我当时在考虑使用Socket更新时间，但是多数情况下，通过套接字进行的通信只是一个计时器。

这是我要拍摄的示例的屏幕截图。 https://gyazo.com/f196e4523c36a4887b23349bcd955d36

以下几点的思考。在比赛上带有时间戳，在比赛上带有isActive。 当我抓住所有游戏时，我只会抓住isActive === true 然后使用时间戳，我将检查使用MomentJS从NOW开始的时间是否大于10分钟（或者无论我们的超时时间是多少）。 如果已过期，则推送一个动作来更新游戏isActive = false 如果有效，我将获取剩余时间，然后设置其变量，然后执行setInterval以减少每秒的时间。甚至使用CountdownJS创建计时器，因为我现在有开始和结束日期。 开始日期为NOW，结束日期为开始日期+超时时间

Answer 1

如果我理解正确，那么您实际上是在尝试完成两件事：

1. 如果比赛超时则取消比赛
2. 在客户端上显示上述超时的倒计时

我认为您在这里有两个选择，但是我认为最简单的解决方案可能是使用activeUntil之类的字段。创建匹配项后，您可以将字段activeUntil设置为now +您希望超时的时间长（在这种情况下为10分钟）。

客户端可以轻松显示该时间戳记的倒计时（使用setInterval或某种形式的库），并且在寻找游戏时，可以轻松查询{{1 }}字段在将来。这将取消由activeUntil字段隐式定义的游戏。

现在，如果您想在游戏不再活动时执行某些操作（例如，将activeUntil之类的字段设置为false），我认为最好在服务器上安排这种事情。如果必须在客户端上执行此操作，则始终可以在JavaScript中执行以下操作：

isActive