切换浏览器选项卡时，Javascript SetInterval执行延迟

Question

作为我的react应用程序的一部分，我有一些setTimeout方法来运行定时器，如果达到零，就会弹出提示，只要浏览器处于活动状态，它就可以正常工作，假设当我们在一个浏览器选项卡之间切换时，我遇到了这个setTimeout间隔执行延迟的问题，达到零需要比配置的时间或我们设置的初始值更长的时间。

假设timeoutInterval默认值为120秒，那么如果我们切换另一个选项卡，就会出现这个setInterval执行延迟问题。有什么解决办法吗？

下面是我的setInterval方法来执行定时器。

const [inactiveTimer, setInactiveTimer] = useState(120);
useEffect(() => {    
const inactiveInterval = setInterval(() => {
if (timeoutInterval > 0) {
setInactiveTimer(timeoutInterval - 1);
} else if (timeoutInterval === 0) {
setShowModal(true);
}
}, 1000);
return () => {
clearInterval(inactiveInterval);
};
}, []);

Answer 1

当选项卡未处于活动状态时，最多每秒可以调用一个函数。解决这个问题的一种选择是使用Web Worker，因为它们在单独的进程中运行，因此不会减慢速度。

另一个解决这个问题的选项是，你可以通过播放~空声音进行破解，这将迫使浏览器保持正常性能。

关于这个失活问题的更多信息-https://codereview.chromium.org/6577021

空声音破解-如何使JavaScript在Chrome中以正常速度运行，即使选项卡不活动？