在前端开发中，我们经常使用 setInterval 函数来定时执行某些代码。但是，如果一个页面有多个标签页或者窗口，而当前标签页不处于激活状态，那么 setInterval 将会暂停执行，直到该标签页被重新激活。
本文将介绍如何解决这个问题，并给出相关的示例代码。
解决方案
我们可以通过监听 visibilitychange 事件来判断当前标签页是否处于激活状态。当标签页从非激活状态变为激活状态时，我们再次启动 setInterval。
-- -------------------- ---- -------
--- -----------
-------- --------------- -
---------- - -------------- -- -
------------------- ---------
-- ------
-
-------- -------------- -
--------------------------
-
-- ------- --------------- --- ------------ -
--------------------------------------------- -- -- -
-- ----------------- -
---------------
- ---- -
----------------
-
---
-在上面的代码中，我们定义了两个函数 startInterval 和 stopInterval，分别用于启动和停止 setInterval。我们还定义了一个全局变量 intervalId 来保存 setInterval 的返回值，以便后续清除定时器。
接下来，我们通过判断 document.hidden 属性来确定页面是否处于激活状态。如果页面处于非激活状态，我们调用 stopInterval 函数停止定时器；如果页面处于激活状态，我们调用 startInterval 函数重新启动定时器。
示例代码
为了更好地理解上述解决方案，我们来看一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ------------
-------
------
--------------- ---------
------- --- ------- -- --- --- -----------
--------
--- -----------
-------- --------------- -
---------- - -------------- -- -
------------------- ---------
-- ------
-
-------- -------------- -
--------------------------
-
-- ------- --------------- --- ------------ -
--------------------------------------------- -- -- -
-- ----------------- -
---------------
- ---- -
----------------
-
---
- ---- -
----------------
-
---------
-------
-------在上面的代码中，我们使用 setInterval 每秒输出一条日志到控制台。我们还添加了一个判断语句，如果浏览器不支持 visibilitychange 事件，则直接启动定时器。
总结
通过监听 visibilitychange 事件，我们可以在标签页被激活时重新启动 setInterval 定时器。本文给出了相关的代码示例，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9931
