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

Question

好了，伙计们，我有一个快速的问题。所以我有一个我正在开发的网站，它会列出多场比赛，但我想显示10分钟的暂停时间。如果倒计时计时器在创建后10分钟结束，则会取消游戏。我不需要实际代码的帮助来取消游戏或类似的东西，只需要指导什么是最好的方法。我想用Socket来更新时间，但这只是一个定时器通过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或某种库(，并且当您在寻找游戏时，您可以很容易查询其activeUntil字段在未来的游戏。这使得游戏的取消隐含地由activeUntil字段定义。

现在，如果你想在游戏不再活动时执行一些操作(例如将isActive这样的字段设置为false(，我认为最好在服务器上安排这类操作。如果这必须在客户端上完成，您可以在JavaScript:中执行类似操作

const onMatchTimeout = () => {
// Do whatever you like on timeout
// Dispatch an action, call some code, etc
};
const timeout = Number(new Date()) - Number(activeUntil);
if (timeout >= 0) {
setTimeout(onMatchTimeout, timeout);
}