在 Web 应用程序中，当用户切换到不同的选项卡或最小化浏览器时，浏览器可能会将当前选项卡或窗口设置为非活动状态。这会导致 JavaScript 代码在后台继续运行，即使用户已经离开了该页面，也会消耗 CPU 和内存资源。因此，对于需要使用 JavaScript 的应用程序，我们需要考虑如何在标签或窗口不活动时暂停或更改其运行。
如何检测标签或窗口是否处于活动状态？
要检测标签或窗口是否处于活动状态，可以使用 Page Visibility API。该 API 提供了两个属性：document.hidden 和 document.visibilityState，用于检测文档是否可见和文档的可见状态。
-- ---------------- -- ------------------------ --- --------- - -- -------- - ---- - -- ------- -
如何暂停 JavaScript 运行？
一种简单的方法是使用 setTimeout() 函数。在页面失去焦点时，设置一个计时器，该计时器在一定时间后执行暂停 JavaScript 的操作。如果用户返回到页面，则清除计时器以恢复 JavaScript 的运行。
--- -------- - ------
----- -------------- - ----- -- -------------
-------- ------------------- -
-- ---------------- -- ------------------------ --- --------- -
-------- - -----
------------- -- -
-- -- ---------- --
----------------------- ------
-- ----------------
- ---- -
-- ---------- -
-- -- ---------- --
----------------------- ------
-------- - ------
-
-
-
--------------------------------------------- -------------------在上面的代码中，当计时器触发时，将执行 console.log("JavaScript 已暂停")，表示 JavaScript 已经被暂停。如果用户返回到页面，则会清除计时器，并执行 console.log("JavaScript 已恢复")，表示 JavaScript 已经恢复。
如何更改 JavaScript 运行？
另一种方法是使用 requestAnimationFrame 函数。该函数可以让浏览器在下次重绘之前调用指定的函数。因此，我们可以将需要更改的 JavaScript 代码作为回调函数传递给 requestAnimationFrame()，并在页面重新获得焦点时执行该函数。
--- --------- - -----
-------- -------------------- -
-- ---------------- -- ------------------------ --- --------- -
--------------------------------
- ---- -
--------- - ------------------------ -- -
-- --------- ---------- --
----------------------- ------
---
-
-
--------------------------------------------- --------------------在上面的代码中，当页面失去焦点时，将调用 cancelAnimationFrame() 函数取消上一个回调函数的执行，并停止更改 JavaScript 的运行。如果用户返回到页面，则会调用 requestAnimationFrame() 函数重新启动回调函数的执行，并更改 JavaScript 的运行。
总结
在 Web 应用程序中，为了节省 CPU 和内存资源，我们需要在标签或窗口不活动时暂停或更改 JavaScript 的运行。使用 Page Visibility API 可以检测文档是否可见和文档的可见状态。使用 setTimeout() 函数可以在一定时间后暂停 JavaScript 的运行，并使用 requestAnimationFrame() 函数可以在下次重绘之前更改 JavaScript 的运行
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9912