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.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 -
Vue 页面如何利用生命周期函数监听用户预览时长相关推荐
- Vue 页面如何监听用户预览时间
最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长.初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed,分别在其中加 ...
- antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
- 二、Vue基础语法学习笔记——事件监听v-on、条件判断(v-if、v-else-if、v-else、v-show)、循环遍历(v-for遍历数组对象,key属性、检测数组更新)、图书案例、双向绑定
四.事件监听 在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等 在Vue中如何监听事件呢?使用v-on指令 v-on介绍 作用:绑定事件监听 ...
- vue中给window添加滚动监听无效的解决方案
页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作. 我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mou ...
- Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义 通过已有属性计算生成一个新的组合属性. 原理 底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质 计算属性的 ...
- uniapp实战项目 (仿知识星球App) - - 利用computed监听用户操作
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件
在vue.js中直接使用onscroll不起作用 利用DOM二级监听事件即可, window.addEventListener('scroll',()=>{console.log(window. ...
- Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
- Arduino 利用串口缓冲区监听的方式读取数据
Arduino 利用串口缓冲区监听的方式读取数据 相关篇<Arduino读取串口接收到的数据并发送数据> 利用串口缓冲区监听的方式读取数据,实现该功能依赖:serialEvent()此函数 ...
最新文章
- ceph存储 PG的状态机 源码分析
- Android中集成Jpush实现推送消息通知与根据别名指定推送附示例代码下载
- 2020 操作系统第四天复习(知识点总结)
- 化工原理 补考(重点)
- 微信浏览器的html5页面显示配置等问题汇集 1,禁止微信浏览器分享页面链接 (定点更新)...
- HTTPS与HTTP的一些区别
- Matplotlib画图教程:在QT界面中嵌入三维图片
- Python读写json文件的简单实现
- dump 分析模式之 INCORRECT STACK TRACE
- Java社区对Java发布周期声明的反应
- 你必须知道iPad的10件事
- BUAA软工第0次作业
- php lwm2m,LwM2M和CoAP及它们之间的关系
- TFIDF之python实现
- Unity官方文档解读之如何使用粒子系统创建汽车尾气
- 戴尔游匣5577安装 ubuntu/mint
- PE——滴水的壳项目
- 微信支付一直抱签名错误,但是校验通过。
- node初探 什么是node
- 【渗透技巧】资产探测与信息收集
热门文章
- 交换机端口故障问题解决方法
- 【渝粤教育】电大中专跨境电子商务理论与实务 (9)作业 题库
- 【渝粤题库】陕西师范大学152206领导科学 作业(高起专、专升本)
- Latex快速入门系列 -- 在TexStudio中正确插入参考文献的基本操作
- 牛顿法, Jacobian矩阵 和 Hessian矩阵
- linux用if语句编程序,Shell 脚本基础 - 使用 if 语句进行条件检测
- 【MFC系列-第22天】GDI算法实战——过渡色
- 使用 CNF 测试套件测试云原生最佳实践
- 让你的对象跑出内存,写入到磁盘或者进行网络传输,一文掌握Java对象序列化
- 阴阳师服务器维护稍后,《阴阳师》手游3月20日维护更新公告