封装页面-失焦-获取焦点

封装一个页面失焦和获取焦点的方法

/**
visibity 监听页面失焦点，获取焦点页面
--------------------------------
调用
// 监听页面失焦重获，处理数据重取
    const destroy = visibity({
      acquireCallback: () => {
        // 获取焦点的回调
      },
      loseCallback: () => {
        // 失去焦点的回调
      }
    });
    // 组件卸载时及时销毁
    return destroy;
 */
export const visibity = (params: {
  /* 获取焦点的回调 */
  acquireCallback?: () => any,
  /* 失去焦点的回调 */
  loseCallback?: () => any,
}) => {
  const {
    acquireCallback = () => { },
    loseCallback = () => { },
  } = params;
  const visibityHandler = () => {
    if ('visible' === document.visibilityState) {
      acquireCallback();
    } else {
      loseCallback();
    }
  };
  document.addEventListener('visibilitychange', visibityHandler);
  return function destroy() {
    document.removeEventListener('visibilitychange', visibityHandler);
  };
};

代码定义了一个名为 visibity 的导出常量函数，它用于监听页面可见性状态的变化。函数接受一个参数 params，该参数是一个对象，包含两个可选的回调函数：

1. acquireCallback: 当页面获得焦点（即用户可以查看和交互页面时）时被调用的函数。如果没有提供，它将默认为空函数。
2. loseCallback: 当页面失去焦点（比如用户切换到其他标签页或最小化窗口）时被调用的函数。同样，如果没有提供，它也将默认为空函数。

函数的主要工作是在内部创建一个名为 visibityHandler 的匿名函数，该函数会根据 document.visibilityState 的值来决定调用哪个回调。document.visibilityState 是一个浏览器提供的属性，可以获取当前文档的可见性状态，可能的值包括 'visible'、'hidden' 和 'prerender'。

visibityHandler 函数的逻辑如下：

• 如果 document.visibilityState 等于 'visible'，说明页面处于活动状态，此时调用 acquireCallback。
• 否则，页面不在活动状态，调用 loseCallback。