最近在参与的项目中，遇到了一个有趣的挑战。项目的某个页面上有一个倒计时功能，最初倒计时在页面正常显示时运行良好。然而，产品提出了一个新需求：要求倒计时在用户熄屏或者切屏后，再次回到页面时能够继续正常运行。我：啊？用户熄屏了也要归前端管？
正如我们所知，现代浏览器有着优化策略，其中之一是计时器节流。当浏览器选项卡处于非活动状态时，为了保护用户设备上的资源和电池寿命，浏览器会限制选项卡的活动。这种浏览器限制会影响计时器、音频、视频等API，导致在选项卡非活动时，这些功能只能每隔几秒甚至几分钟运行一次。
为了解决这个问题，我仔细思考并提出了以下几种解决方案：
方案一：轮训接口更新时间
通过在已有的轮训接口中加入一个字段来获取时间，每次轮训时更新倒计时的时间。然而，这需要修改原有代码，因为现在的时间是从一个接口单独获取的。将其加入轮训接口可能导致倒计时使用两个接口的数据，同时可能会影响到原有逻辑，且需要后端人力来适配，成本较高。
方案二：使用web workers API
采用web workers API，即使浏览器页面切屏或者熄屏，计时器也会继续运行。然而，对于一个简单的倒计时功能，引入web workers API显得有些繁琐，有点大材小用。
方案三：利用visibilitychange API
最终，我选择了方案三。浏览器提供了一个名为visibilitychange的API，可以用来监听浏览器的切入切出以及熄屏操作。通过这个API，我们可以轻松实现倒计时在用户切屏或熄屏后的处理：
// 切后台或者熄屏倒计时更新
useEffect(() => {
const handleVisibilityChange = () => {
if (document.hidden) {
// 用户切屏或熄屏时的处理逻辑
} else {
// 用户切回来时的处理逻辑，例如调用接口等
}
};
document.addEventListener("visibilitychange", handleVisibilityChange);
return () => {
document.removeEventListener("visibilitychange", handleVisibilityChange);
};
}, []);
通过监听visibilitychange事件，我们可以很方便地捕获用户对浏览器的切屏和熄屏操作，从而实现倒计时的灵活控制。这种方案既简单又高效，没有引入额外的复杂性，是我认为最适合当前项目的解决方案。
