倒数计时器减慢页面：如何为单个页面创建多个运行倒数计时器？答案

【问题标题】：Countdown Timers Slowing Down Page: How to create multiple running countdown timers for a single page?倒数计时器减慢页面：如何为单个页面创建多个运行倒数计时器？
【发布时间】：2019-07-25 14:54:25
【问题描述】：

我正在尝试创建一个网站，该网站在页面上同时运行多个倒数计时器，包括可能显示毫秒。

到目前为止，我一直在使用 setInterval() 函数，但是在运行了几个 setIntervals() 之后，页面开始变慢，秒数开始变慢下降和滞后等，它不起作用。

timeanddate.com、Toggl 或 Harvest 等专业网站如何允许您同时使用多个倒数计时器，而不会减慢页面速度，并且始终与当前时间完全同步？没有滞后或问题？

我希望同时在页面上运行大约 25 个倒计时计时器，而不会减慢页面速度，或者不必每秒向服务器发送数百个请求？

我正在尝试创建一个为每项任务设置计时器的个人待办事项应用，并且我想查看一整天为所有任务运行的计时器。

【问题讨论】：

为什么需要 25 个定时器？不能只有一个setInterval，修改25个不同的变量吗？
"...每秒向服务器发送数百个请求"：这个故事中的服务器是如何结束的？

标签： javascript timer

【解决方案1】：

我会首先开始使用 moment.js，因为它可以让您使用 javascript 的时间超级快。

现在，当您创建任务时，您可以使用 moment.js 存储它应该何时过期的时间戳。

然后你有一个全局计时器，每秒获取时间。

以毫秒为单位是一个坏主意，因为事件循环会减慢应用程序本身的时间。（每一秒都不会 100% 准确，但它会得到正确的时间，每一浏览器秒）。

此全局计时器将触发更新每个任务计时器的函数，将当前时间与任务到期时间进行比较。

不需要 25 个计时器！只需要一个计时器来处理计算两次差的函数！

【讨论】：