«

Vue页面监听用户预览时间功能如何实现

时间:2024-4-13 16:35     作者:韩俊     分类: Javascript


这篇文章主要介绍“Vue页面监听用户预览时间功能如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue页面监听用户预览时间功能如何实现”文章能帮助大家解决问题。

首先想到借助 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.id
        this.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
 中其它的逻辑混在一起。提高代码的可读性和维护性。

标签: javascript vue

热门推荐