基于Vue页面监听用户预览时间的思路方法是什么-群英

上一篇：如何用vue_drf制作短信验证码，代码是什么下一篇：Node.Js内存占用高什么原因，如何处理好

这篇文章给大家分享的是“基于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 中其它的逻辑混在一起。提高代码的可读性和维护性。

在写代码的时候我们不仅要实现功能，还要想的更多一点，这就是普通和高手的区别。

到此这篇关于“基于Vue页面监听用户预览时间的思路方法是什么”的文章就介绍到这了,更多相关基于Vue页面监听用户预览时间的思路方法是什么内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！

标签： Vue 页面监听

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：如何用vue_drf制作短信验证码，代码是什么下一篇：Node.Js内存占用高什么原因，如何处理好