粒子特效网站,服务器做网站流程,电子商务网站的建设的意义,网站建设几点关门最近的业务中涉及到这样一个需求#xff0c;在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长。初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed#xff0c;分别在其中加入开始计时和清除计时的逻辑#xff0c;通过后台的接口上报对应… 最近的业务中涉及到这样一个需求在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长。初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed分别在其中加入开始计时和清除计时的逻辑通过后台的接口上报对应的培训素材的时间数据即可达到目的。有了思路我们就可以开始筹划具体的代码实现。定义开始结束计时函数在 data 中定义我们通过变量定义计时器这样可以通过 this.timer 随处可访问便于后面销毁页面的时候清除它。duration 为时长的计数变量初始化为 0可根据计时器的第二个时间间隔参数决定单位是秒还是毫秒。export default {data() {return {timer: null,duration: 0}},methods: {startTimer() {this.timer setInterval(() {console.log(观看时长: , this.duration)this.duration}, 1000)},stopTimer() {clearInterval(this.timer)this.updateViewHistory() // 上报数据接口},updateViewHistory() {// 上报接口逻辑代码....}}
}
在 startTimer 函数中我们顺便打印出 duration 变量来验证显示的时间是否正确。如何以及在哪调用定义好了开始结束的方法我们就要开始想在哪调用它们。因为预览的页面内容不是唯一的是根据素材的 id 来获取详情进行渲染的。如果我们把 startTimer 写在 mounted 生命周期里那么当我们访问不同 id 的页面的时候无法正常切换我们想要的逻辑。所以我选择了通过监听路由中的 id 参数来达到在预览不同页面时候来切换开始和结束的逻辑watch: {$route: {immediate: true,handler(to, from) {if (to.params.id) this.trainingId to.params.idthis.startTimer()}}}
调用了开始计时的方法终于我们可以在 console 的 log 中可以看到输出了当前的时长然后也是最后一步我们需要在页面销毁的时候调用 stopTimer 函数来清除定时器上报数据。由于我们的预览页面是通过 window.open 打开的独立的标签页所以这里是通过 destroyed 生命周期函数监听。如果是通过路由方法进行的跳转那么我们需要在离开页面的时候进行销毁方可再通过 destroyed 监听到。 mounted() {window.addEventListener(beforeunload, e this.beforeunloadHandler(e))},destroyed() {window.removeEventListener(beforeunload, e this.beforeunloadHandler(e))}
通过 window 的监听器方法来来间接调用 stopTimer 方法methods: {beforeunloadHandler (e) {this.stopTimer()}
}
这里有人会问为什么不直接在 destroyed 中调用 stopTimer 方法这样可以分离出特有的逻辑不与 destroyed 中其它的逻辑混在一起。提高代码的可读性和维护性。在写代码的时候我们不仅要实现功能还要想的更多一点这就是普通和高手的区别。- END -
