前端JS必用工具【js-tool-big-box】学习，检测浏览器当前切换状态

我们时常会遇到类似这种需求，比如说第一个浏览器页签，有一个 setInterval 倒计时的场景，然后我们切换浏览器页签了，去做其他事情了，等再切换回来的时候呢，setInterval 就开始疯狂的执行。又比如呢，我们浏览器里播放着一个视频，然后希望浏览器切换了页签，或者把浏览器最小化了之后呢，把视频停止掉。等浏览器切换回来的时候，视频再继续播放。

这就需要检测浏览器页签是否被切换了，或者浏览器是否被最小化了。下面我们来看一下，js-tool-big-box 这个工具库中，如何使用这一方法。

1 安装js-tool-big-box工具库

执行安装命令

npm install js-tool-big-box

2 引入 browserBox 对象

检测浏览器切换状态的公共方法在 browserBox 对象下面，引入一下：

import { browserBox } from 'js-tool-big-box';

3 方法调用

如果做一个暂停视频播放和继续播放的效果不太合适，我们做一个暂停setInterval和继续setInterval的效果来测试一下功能吧。

3.1 在Vue项目中添加一个累加定时器

如图，定时累加器已经开始工作了。

3.2 浏览器最小化

我们现在要做的是，添加代码，检测浏览器最小化或者浏览器标签切换后，将累加器停止掉，当切换回来的时候，再让累加器继续执行。

3.3 方法总结