使用 visibilitychange 处理页面关闭事件

admin

一、概念
$ c% S3 ~) P" ?6 y! Q  E3 J       visibilitychange事件是浏览器17年前后添加的一个事件，是指当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改) 事件。
( a5 Z' U# {* P% i       MDN 也有相关属性介绍 MDN Web Docs visibilitychange_event
+ G" u. w1 j  }2 e二、使用场景
5 a0 ~2 a* a7 G: h8 K1 H1 j+ N       当浏览器的某个标签页切换到后台，或从后台切换到前台时，会在 docment 上触发 visibilityState 事件；现在主流的浏览器都支持该消息了，例如Chrome, Firefox等。出于兼容性原因（Safari 14 之前的版本不支持挂载在 window 上），要在 document 上监听 visibilityState 事件；
7 b6 j' K/ c) s+ d       什么时候触发呢？ 当用户导航到一个新的页面，改变标签页，关闭标签页，最小化或者关闭浏览器；或者移动端从浏览器换到其他的app。
% P& {3 S- p; h; i       在做页面游戏的时候、播放音视频文件时、在线考试防止考生离开当前页面时、数据上报等场景都时常用到。
三、使用方法
- b% n5 U+ I# U4 m- X       可以利用 document.hidden 的值来进行判断，值类型为 布尔，true 为隐藏，false 为激活。
       基本使用方法如下：
; }# Z1 f4 v# {1 ^( u' U8 @

复制代码
document.addEventListener("visibilitychange", function(){}, false);

      在项目中当页面离开的时候就关闭查询版本是否更新的定时器，以节约性能，等页面再次激活的时候再次设置定时器。这里只摘取主要逻辑进行说明。

复制代码
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);
  };
}

四、注意
( o7 \  p' i1 ^# c; O+ d9 C       现在某些浏览器还保留了visibilitychange的前缀，例如Chrome浏览器还保留着webkit前缀，不过该事件已经趋于稳定，在Chrome 33及以后就去掉了前缀，直接使用visibilitychange。
注：
& }! @0 Q4 Q( x8 J- e3 U3 C" D& k（1）微信内置的浏览器因为没有标签，所以不会触发该事件。
( s# |9 V5 c+ T& N' h- y0 P（2）手机端直接按Home键回到桌面，也不会触发该事件。
+ K1 e2 t& H; \（3）PC端浏览器失去焦点不会触发该事件，但是最小化，或回到桌面会触发。