学习记录684@vue 统计用户页面停留时间

本文主要是介绍学习记录684@vue 统计用户页面停留时间，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求

想要统计用户在页面停留的真实时间，进入页面开始计时，切出本页面后完毕，另外需要注意关闭浏览器网页窗口或者关闭整个浏览器也要停止计时。

代码实现

  data() {return {browseTime: 0, // 浏览时长初始值为 0clearTimeSet: null}},mounted() {window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))this.setBrowseTime() // 页面加载完成后开始计时},destroyed() {window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))clearInterval(this.clearTimeSet) // 离开页面后清除定时器this.addBrowseRecord() // 上送后台接口，将浏览时长等信息传到后台，离开当前路由后调用},methods: {addBrowseRecord() {const payLoad = {userId: this.userId,deptId: this.depId,browseTime: this.browseTime}addBrowseRecord(payLoad).then((res) => {if (res.code === 0) {console.log('保存停留时间成功', payLoad)} else {console.log('保存停留时间失败', payLoad)}}).finally(() => {})},setBrowseTime() {// 设置定时器this.clearTimeSet = setInterval(() => {this.browseTime++console.log(this.browseTime, '时长累计')}, 1000)},beforeunloadHandler(e) {// 针对关闭窗口或者浏览器的if (this.clearTimeSet != null) {clearInterval(this.clearTimeSet)this.addBrowseRecord()}console.log('关闭窗口之后')}}

这篇关于学习记录684@vue 统计用户页面停留时间的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---