在萍乡谁可以做网站,湛江门户网站,如何制作app软件下载,html精美登录界面源码目录 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…目录 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项目为例
scriptexport default {name: PagePlay,data () {return {canPlay: false,}},created() {},mounted() {document.addEventListener(visibilitychange, function() {if (document.hidden) {// 页面不可见视频停止播放this.canPlay false;} else {// 页面可见视频继续播放this.canPlay true;}});}
}
/script4 一个有意思的场景
有一段时间的工作呢就是通过网页帮助叔叔们播放监控视频。有一次有人提出要来看一个加油站的监控视频要播放前一天晚上的。为什么要看视频呢是老板提出的。老板一般下午就会回家去让一个工人在加油站上班给晚上需要加油的用户们加油。但老板第二天去了加油站发现这个工人还在呼呼大睡而且外面的油洒了一地。老板就问工人咋回事咋晚上还把油喷洒到地上了呢。工人说不可能啊昨晚有人来加油其中一个穿着红裙子的客户让给加油还给了我现金。但工人从兜里拿出来的时候却是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;}});},
}
/script6 升级版实现二
但是第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 以控制累加定时器为例
例子中呢我们就不单纯的操控一个变量了那太简单了我们操控一个定时累加器。
templatediv classbox-404pjs-tool-big-box/pp做功能更丰富的前端JS库/p/div
/templatescript
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)}}
}
/script6.4 查看定时器效果 上图中我们先使定时器自己执行5秒。然后切换标签随便去做一些其他事情。然后再切换回来看一下。要达到的效果是在切换回来之前不能继续执行。再切换回来之后呢必须得继续执行那么效果就达到了。我们来看一下
