大学校园网站建设,oa软件公司排名,高新技术企业申报网站,比较好的logo设计网站需求
想要统计用户在页面停留的真实时间#xff0c;进入页面开始计时#xff0c;切出本页面后完毕#xff0c;另外需要注意关闭浏览器网页窗口或者关闭整个浏览器也要停止计时。
代码实现 data() {return {browseTime: 0, // 浏览时长初始值为 0clearTimeSet: null}},moun…需求
想要统计用户在页面停留的真实时间进入页面开始计时切出本页面后完毕另外需要注意关闭浏览器网页窗口或者关闭整个浏览器也要停止计时。
代码实现 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.browseTimeconsole.log(this.browseTime, 时长累计)}, 1000)},beforeunloadHandler(e) {// 针对关闭窗口或者浏览器的if (this.clearTimeSet ! null) {clearInterval(this.clearTimeSet)this.addBrowseRecord()}console.log(关闭窗口之后)}}
