用于页面访问，心跳监测的方法

1 页面首次进入是否触发心跳

2 网页tab切换时&＃xff0c;切回来是否触发心跳以及针对切回tab触发心跳的标识字段

3 浏览标识和心跳标识&＃xff0c;用于区分首次进入以及后续浏览时触发的心跳上报

4 心跳上报间隔

/*** &＃64;param {string} page 必传&＃xff0c;页面标识 * &＃64;param {object} options 可选&＃xff0c;一些配置项 见 defaultOptions*/
export default class HeartDance{constructor(page, options &＃61; {}){if(!page){throw new SyntaxError("page is required!")}const defaultOptions &＃61; {reportBrowse: true, // 是否上报浏览reportTabBack: true, // 切回tab 是否立刻上报心跳tabBackInfo:{key:&＃39;itemValue&＃39;,value:&＃39;tag&＃39;}, // 切回tab 上报心跳标识browse: &＃39;browse&＃39;, // 浏览标识beat:&＃39;beat&＃39;, // 心跳标识heartDanceTime:30000, // 心跳间隔};this.danceInfo &＃61; {};this.page &＃61; page; // 当前页面标识this.options &＃61; Object.keys(options).length &＃61;&＃61;&＃61; 0 ? defaultOptions : this.#mergeOptions(defaultOptions, options);}/*** 产生心跳监听* &＃64;param {*} fn 定时回调函数*/generateHeartDance(fn){if(!fn || typeof fn !&＃61;&＃61; &＃39;function&＃39;){throw new TypeError(&＃96;${fn} is not a function&＃96;);}const { reportBrowse, browse, beat, heartDanceTime, tabBackInfo} &＃61; this.options;const page &＃61; this.page;// 首次进入页面&＃xff0c;上报浏览if(reportBrowse){fn(page, browse);}// 定时心跳if(!document.hidden){this.danceInfo.t &＃61; setInterval(() &＃61;> {fn(page, beat);}, heartDanceTime)}this.danceInfo.listener &＃61; () &＃61;> {if(!document.hidden){// tab切换回来显示 立刻发一次心跳fn(page, beat,{[tabBackInfo.key]: tabBackInfo.value});// 新的定时心跳this.danceInfo.t &＃61; setInterval(() &＃61;> {fn(page, beat);}, heartDanceTime)}else{// tab隐藏 清计时器clearInterval(this.danceInfo.t);}}document.addEventListener(&＃39;visibilitychange&＃39;, this.danceInfo.listener);}/*** 清除定时器 去掉监听事件*/removeHeartDance(){clearInterval(this.danceInfo.t);document.removeEventListener(&＃39;visibilitychange&＃39;, this.danceInfo.listener);}/*** 合并可选项参数* &＃64;param {*} source * &＃64;param {*} options * &＃64;returns */#mergeOptions(source, options) {for(const key in options){if(isObject(options[key])){source[key] &＃61; this.#mergeOptions(source[key], options[key]);}else{source[key] &＃61; options[key];}} function isObject(val){return val !&＃61;&＃61; null && typeof val &＃61;&＃61;&＃61; &＃39;object&＃39;}return source;}}

基本使用&＃xff1a;

const heartDance &＃61; new HeartDance(&＃39;pageName&＃39;, { heartDanceTime: 10000 });heartDance.generateHeartDance(fn); // fn 是回调&＃xff0c;可以是接口&＃xff0c;也可以是其它用于记录的方法heartDance.removeHeartDance() // 在合适的时机清除监听&＃xff0c;比如页面离开或者卸载