切换网页visibilitychange，的升级版实现

目录

1 需求场景

2 用到的技术

3 日常检测方法

4 一个有意思的场景

5 升级版实现一 

5.1 新建 /utils/browser.js

5.2 项目业务组件中使用

6 升级版实现二

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

6.2 引入 browserBox 对象 

6.3 以控制累加定时器为例

6.4 查看定时器效果

---

1 需求场景

我们做前端开发，会有这样一种场景。比如说，网页有个setInterval做的一个轮播图，然后我们切换浏览器的标签呢，继续去做一件其他的事情。当做完这件事的时候呢，再切换回来，轮播图就会像疯了一样的转动几次，然后又恢复正常。

又或者呢，我们希望网页中的视频，在浏览器最小化的时候呢，视频就停止播放。当浏览器再被切换回屏幕最上层的时候呢，视频继续播放。

2 用到的技术

这里，所用到的技术呢，就是visibilitychange。visibilitychange是一个事件，用于监听当前页面的可见性状态是否发生改变。这个事件通常用于处理当用户切换到另一个标签页或者最小化浏览器窗口时的情况。

比如用户将浏览器切换到另一个标签页的时候，或者是将网页窗口最小化的时候，或者是移动端APP嵌入的H5网页，然后用户将APP切换到后台运行的时候，浏览器都会监听到这个事件。

3 日常检测方法

比如我们要监测一个视频，当浏览器网页最小化的时候，视频就停止播放。当浏览器被切换恢复的时候，视频就继续播放。以一个Vue项目为例：

<script>

export default {
  name: 'PagePlay',
  data () {
    return {
      canPlay: false,
    }
  },
  created() {
    
  },
  mounted() {
    document.addEventListener('visibilitychange', function() {
      if (document.hidden) {
        // 页面不可见，视频停止播放
        this.canPlay = false;
      } else {
        // 页面可见，视频继续播放
        this.canPlay = true;
      }
    });

  }
}
</script>

4 一个有意思的场景

有一段时间的工作呢，就是通过网页帮助叔叔们播放监控视频。有一次，有人提出要来看一个加油站的监控视频，要播放前一天晚上的。为什么要看视频呢，是老板提出的。老板一般下午就会回家去，让一个工人在加油站上班，给晚上需要加油的用户们加油。但老板第二天去了加油站，发现，这个工人还在呼呼大睡，而且外面的油洒了一地。老板就问工人，咋回事，咋晚上还把油喷洒到地上了呢。工人说，不可能啊，昨晚有人来加油，其中一个穿着红裙子的客户，让给加油，还给了我现金。但工人从兜里拿出来的时候却是2张纸。后来我们就开始播放那天的视频。

视频由于需要对照着一些数据来看，所以需要时不时的切换，切换后就需要暂停，再次打开的时候呢，就需要继续播放，这就用到了这个 visibilitychange 监听技术。

后来看了几遍视频后才发现，嗨，原来是工人睡懵了，晚上他自己从屋里走出来，和空气说话，然后对着地上加油。这件事就这么过去了。

5 升级版实现一 

上面第3步的实现没有问题，但这样写太初级了，我们如果有多处使用，就必须要每个业务组件里都去实现。我们必须把他添加到项目的公共方法中去，所以就需要新建一个 utils 目录。这样，公共方法和业务组件内的实现可以是：

5.1 新建 /utils/browser.js

新建目录后，我们写上公共方法

const getPageVisibility = function(callback) {
  document.addEventListener('visibilitychange', function() {
      const isPageVisible = !document.hidden;
      callback(isPageVisible);
  });       
}

export default getPageVisibility ;

5.2 项目业务组件中使用

到了业务组件中可以这样使用

<script>
import getPageVisibility from '../utils/browser';

export default {
  name: 'PageIndex',
  data () {
    return {
      canPlay: false,
    }
  },
  created() {
    
  },
  mounted() {
    getPageVisibility((isVisible) => {
      if (isVisible) {
        this.canPlay = true;
      } else {
        this.canPlay = false;
      }
    });
  },
}
</script>

6 升级版实现二

但是第5步这样实现呢，还是有问题的。你换个项目呢，还得把代码拷过去；人家问你咋解决的，你跟人家说去哪个哪个项目里找吧，在那里呢；所以啊，还是给大家推荐一个快捷高效的库，没错，js-tool-big-box。高效的前端开发，从js-tool-big-box开始。

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

执行安装命令

npm install js-tool-big-box

6.2 引入 browserBox 对象 

检测浏览器切换状态的公共方法，被放到了browserBox对象下面，可以快捷调用。

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

6.3 以控制累加定时器为例

例子中呢，我们就不单纯的操控一个变量了，那太简单了，我们操控一个定时累加器。

<template>
  <div class="box-404">
    <p>js-tool-big-box</p>
    <p>做功能更丰富的前端JS库</p>
    
  </div>
</template>

<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>

6.4 查看定时器效果

上图中，我们先使定时器自己执行5秒。然后切换标签，随便去做一些其他事情。然后再切换回来看一下。要达到的效果是：在切换回来之前，不能继续执行。再切换回来之后呢，必须得继续执行，那么效果就达到了。我们来看一下：