前端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项目中添加一个累加定时器

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

export default {
  name: 'PageIndex',
  data () {
    return {
      timer: null,
      number: 0,
    }
  },
  created() {
    
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.number += 1;
        console.log('计时器数值：', this.number);
      }, 990)
    }
  }
}
</script>

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

3.2 浏览器最小化

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

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

export default {
  name: 'Page404',
  data () {
    return {
      timer: null,
      number: 0,
    }
  },
  created() {
    
  },
  mounted() {
    this.startTimer();
    // 判断浏览器是否切出或者最小化
    browserBox.getPageVisibility((isVisible) => {
      if (isVisible) {
        this.startTimer();
      } else {
        window.clearInterval(this.timer);
        this.timer = null;
      }
    });
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.number += 1;
        console.log('计时器数值：', this.number);
      }, 990)
    }
  }
}
</script>

3.3 方法总结

方法名	返回值	入参
getPageVisibility	返回值是回调函数中的一个变量 ，如以上代码示例，为 isVisible 如果isVisible为true，表示浏览器已切换回来了； 如果isVisible为false，表示浏览器被最小化或者切换走了。	一个回调函数