我们时常会遇到类似这种需求,比如说第一个浏览器页签,有一个 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,表示浏览器被最小化或者切换走了。 | 一个回调函数 |