js使用visibilitychange处理页面关闭事件
在对web项目部署提示用户刷新功能优化的时候，用到了 visibilitychange,这里就简单的介绍下 visibilitychange 。
概念
visibilitychange事件是浏览器17年前后添加的一个事件，是指当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改) 事件。
MDN 也有相关属性介绍 ☞ MDN Web Docs visibilitychange_event
使用场景
当浏览器的某个标签页切换到后台，或从后台切换到前台时，会在 docment 上触发 visibilityState 事件；现在主流的浏览器都支持该消息了，例如Chrome, Firefox等。出于兼容性原因（Safari 14 之前的版本不支持挂载在 window 上），要在 document 上监听 visibilityState 事件；
什么时候触发呢？ 当用户导航到一个新的页面，改变标签页，关闭标签页，最小化或者关闭浏览器；或者移动端从浏览器换到其他的app。
在做页面游戏的时候、播放音视频文件时、在线考试防止考生离开当前页面时、数据上报等场景都时常用到。
使用方法
可以利用 document.hidden 的值来进行判断，值类型为 布尔，true 为隐藏，false 为激活。
基本使用方法如下：
document.addEventListener("visibilitychange", function(){}, false);
在项目中当页面离开的时候就关闭查询版本是否更新的定时器，以节约性能，等页面再次激活的时候再次设置定时器。这里只摘取主要逻辑进行说明。具体可以看 ☞ Vue项目部署后提示刷新版本
const delayTime = 30;
let popupFlag = false;
let interval = null;
document.addEventListener('visibilitychange', checkVisibility);
// 切换页面事件
function checkVisibility() {
if (popupFlag) return;
if (document.hidden) {
// 离开时
clearInterval(interval);
interval = null;
} else {
// 防止10秒之内频繁切换
debounce(createInterval(checkVersion), 10000);
}
}
// 检查版本
function checkVersion() {
//业务逻辑省略...
}
// 创建定时器
function createInterval(callback) {
interval = setInterval(callback, delayTime * 1000);
}
function debounce(fn, delay) {
//记录上一次的延时器
let timer = null;
return function () {
//清除上一次的演示器
clearTimeout(timer);
//重新设置新的延时器
timer = setTimeout(() => {
//修正this指向问题
fn.apply(this);
}, delay);
};
}
注意
现在某些浏览器还保留了visibilitychange的前缀，
例如Chrome浏览器还保留着webkit前缀，
不过该事件已经趋于稳定，在Chrome 33及以后就去掉了前缀，
直接使用visibilitychange
注：（1）微信内置的浏览器因为没有标签，所以不会触发该事件。
（2）手机端直接按Home键回到桌面，也不会触发该事件。
（3）PC端浏览器失去焦点不会触发该事件，但是最小化，或回到桌面会触发。
到此这篇关于js使用visibilitychange处理页面关闭事件的文章就介绍到这了,更多相关js visibilitychange页面关闭内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章记录如何通过js代码实现复制内容到剪切板,之后可以粘贴到需要的地方的功能,文中通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了深入剖析JavaScript instanceof 运算符,ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了js中的如何定位固定层的位置,需要的朋友可以参考下2014-06-06
Canvas 适合绘制大数据量图形元素的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也适合实现某些视觉特效。本文就来利用Canvas实现满屏爱心和文字动画的制作，感兴趣的可以了解一下2022-11-11
一篇随笔中网友 skyaspnet 问我如何压缩HTML，当时回答是推荐他使用gzip，后来想想，要是能把所有的html，jsp(aspx)在运行前都压缩成1行未免不是一件好事啊。2010-06-06
今天上午抽空随手写了个星级评分的效果，给大家分享下。由于水平有限，如有问题请指出;首先要准备一张星星的图片，灰色是默认状态，黄色是选择状态，需要的朋友可以参考下2012-12-12
这篇文章主要介绍了基于BootStrap的前端分页带省略号和上下页效果,需要的朋友可以参考下2017-05-05
微信小程序最难实现的公共业务是什么？应该是表单校验，这篇文章主要介绍了微信小程序如何实现表单校验功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节，与大家分享。2011-09-09
Date() 日期对象是一个构造函数必须使用new来调用创建我们的日期对象,本文给大家介绍JS中的Date()使用小结,感兴趣的朋友一起看看吧2024-01-01
最新评论