1 頁面首次進(jìn)入是否觸發(fā)心跳

2 網(wǎng)頁tab切換時(shí)，切回來是否觸發(fā)心跳以及針對(duì)切回tab觸發(fā)心跳的標(biāo)識(shí)字段

3 瀏覽標(biāo)識(shí)和心跳標(biāo)識(shí)，用于區(qū)分首次進(jìn)入以及后續(xù)瀏覽時(shí)觸發(fā)的心跳上報(bào)

4 心跳上報(bào)間隔

/*** @param {string} page 必傳，頁面標(biāo)識(shí) * @param {object} options 可選，一些配置項(xiàng) 見 defaultOptions*/ export default class HeartDance{constructor(page, options = {}){if(!page){throw new SyntaxError("page is required!")}const defaultOptions = {reportBrowse: true, // 是否上報(bào)瀏覽reportTabBack: true, // 切回tab 是否立刻上報(bào)心跳tabBackInfo:{key:'itemValue',value:'tag'}, // 切回tab 上報(bào)心跳標(biāo)識(shí)browse: 'browse', // 瀏覽標(biāo)識(shí)beat:'beat', // 心跳標(biāo)識(shí)heartDanceTime:30000, // 心跳間隔};this.danceInfo = {};this.page = page; // 當(dāng)前頁面標(biāo)識(shí)this.options = Object.keys(options).length === 0 ? defaultOptions : this.#mergeOptions(defaultOptions, options);}/*** 產(chǎn)生心跳監(jiān)聽* @param {*} fn 定時(shí)回調(diào)函數(shù)*/generateHeartDance(fn){if(!fn || typeof fn !== 'function'){throw new TypeError(`${fn} is not a function`);}const { reportBrowse, browse, beat, heartDanceTime, tabBackInfo} = this.options;const page = this.page;// 首次進(jìn)入頁面，上報(bào)瀏覽if(reportBrowse){fn(page, browse);}// 定時(shí)心跳if(!document.hidden){this.danceInfo.t = setInterval(() => {fn(page, beat);}, heartDanceTime)}this.danceInfo.listener = () => {if(!document.hidden){// tab切換回來顯示 立刻發(fā)一次心跳fn(page, beat,{[tabBackInfo.key]: tabBackInfo.value});// 新的定時(shí)心跳this.danceInfo.t = setInterval(() => {fn(page, beat);}, heartDanceTime)}else{// tab隱藏 清計(jì)時(shí)器clearInterval(this.danceInfo.t);}}document.addEventListener('visibilitychange', this.danceInfo.listener);}/*** 清除定時(shí)器 去掉監(jiān)聽事件*/removeHeartDance(){clearInterval(this.danceInfo.t);document.removeEventListener('visibilitychange', this.danceInfo.listener);}/*** 合并可選項(xiàng)參數(shù)* @param {*} source * @param {*} options * @returns */#mergeOptions(source, options) {for(const key in options){if(isObject(options[key])){source[key] = this.#mergeOptions(source[key], options[key]);}else{source[key] = options[key];}} function isObject(val){return val !== null && typeof val === 'object'}return source;}}

基本使用：

const heartDance = new HeartDance('pageName', { heartDanceTime: 10000 });heartDance.generateHeartDance(fn); // fn 是回調(diào)，可以是接口，也可以是其它用于記錄的方法heartDance.removeHeartDance() // 在合適的時(shí)機(jī)清除監(jiān)聽，比如頁面離開或者卸載

總結(jié)

以上是生活随笔為你收集整理的用于页面访问，心跳监测的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。