我现在正在学习react。我正在学习一个秒表应用程序的react教程，它只是每秒增加一次时间。代码运行得很好，因为它确实每秒增加一次时间。但是，如果我打开一个新的浏览器标签，甚至打开一个不同的应用程序，react似乎不会更新状态，这意味着，计时器停止增加值。但是如果我访问React应用程序，它开始增加（再一次）。
我看着计时器转到“00：00：10”，然后点击另一个标签，等待大约10秒，当我回到react应用程序时，计时器仍然是“00：00：11”，而不是“00：00：20”。
我是不是漏掉了什么？为什么react会这样？是因为性能问题吗？我很确定这是react的特性，但我似乎在其他地方找不到解释。
我也不知道我是否应该提供秒表应用程序的代码，因为我确信这不是一个错误，也不是与代码本身有关的问题。让我知道我是否需要包括代码，以便我可以编辑这个问题。
1条答案
按热度按时间iaqfqrcu1#
如果你的网站不活跃（在活跃的浏览器标签中），那么浏览器不会执行你的JavaScript代码。它这样做是为了保存CPU时间--人们往往会打开很多标签。
对于一个计时器应用程序，你需要记住计时器的开始时间（例如
new Date().getTime()），然后每隔一秒计算与这个开始时间的差值。这样，如果用户离开标签并返回，那么计时器在最近的一秒后再次正确。另一个好处是，即使浏览器标签页始终保持聚焦，计时器也会更加准确。计时器调用并不精确，因此代码不会每秒都被调用，而是每秒都被调用，并且错误会随着时间的推移而累加。如果您有可用的开始时间，那么这些错误就不重要了。
编辑：关于这个主题还有更多的内容，我能快速找到的最好的东西是这个讨论How do browsers pause/change Javascript when tab or window is not active?