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 监听用户预览时间内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue监听页面刷新和关闭功能

    我在做项目的时候,有一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化. 将提交的一步操作放到 beforeDestroy 钩子函数中. beforeDestroy() { console.log('销毁组件') this.finalCart()}, 但是发现  beforeDestroy 只能监听到页面间的跳转,无法监听到页面刷新和关闭标签页. 所以还是要借助 onbeforeunload 事件. 顺便复习了一下 JavaScript 中的一

  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

    业务场景重现 现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的<router-view>里的.vue页面,并进行查询获取数据 解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件 解决方案 我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条 然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件 代码 数据仓库store.js import Vue from '

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch

  • vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)

    [注]:popstate 事件 a.当活动历史记录条目更改时,将触发popstate事件. b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本. c.需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件. d.只有在做出浏览器动作时,才会触发该事件,如用

  • vue在App.vue文件中监听路由变化刷新页面操作

    在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次. export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.

  • Vue 页面监听用户预览时间功能的实现代码

    Vue 页面监听用户预览时间功能的实现代码

    最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长.初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed,分别在其中加入开始计时和清除计时的逻辑,通过后台的接口上报对应的培训素材的时间数据,即可达到目的. 有了思路,我们就可以开始筹划具体的代码. 定义开始结束计时函数 在 data 中定义我们通过变量定义计时器,这样可以通过 this.timer 随处可访问,便于后面销毁页面的时候清除它. duration 为时长

  • vue使用监听实现全选反选功能

    最近在学习vue这一块的内容,在项目中用到了全选全不选的功能,开始的时候借鉴了别人写的功能,但感觉写的有一些缺陷,然后就自己写了一套,如有写的不好的地方,请各位大佬指教,废话不多说,上代码. 首先定义数据 data: { /*全选.全不选*/ allCheck:false,//全选功能 //循环数据 checkArr:[ {cityName:"东城区",isCheck:false}, {cityName:"西城区",isCheck:false}, {cityName

  • JS实现全屏预览F11功能的示例代码

    老是不通过,没办法,只能是重新发布了,反正我就是杠上了,大大小小写过很多前端特效,当然也经常在网上copy或者修改人家的代码,我觉得也挺好的,为什么?!因为我想这样,你能怎么办,打我? 少废话,直接上代码, JS代码 function fullScreen(el) { var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,

  • vue监听用户输入和点击功能

    vue监听用户输入和点击功能

    本文实例为大家分享了vue监听用户输入和点击的具体代码,供大家参考,具体内容如下 功能1:监听用户输入和点击,并实时显示, 功能2:点击发布,编辑页面隐藏,显示发布成功. 功能1 html代码: 使用:v-model监听,!submmited视图默认显示,注意监听option v-for="(i,index) in authors"   v-bind:value="authors[index], 监听当下用户点击的那个: <div id="add-blog&q

  • Android EditText 监听用户输入完成的实例

    我们都知道, Android EditText输入框,并没有监听用户输入完成的功能,需要我们自己实现. 下面是实现的方法,仅供参考: EditText editText = (EditText) findViewById(R.id.edit); editText.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, i

  • Android快速实现无预览拍照功能

    本文实例为大家分享了Android实现无预览拍照功能的具体代码,供大家参考,具体内容如下 实现思路: 把预览的SurfaceView的宽高设置为肉眼看不出的值,例如0.1dp,其他的就是自定义相机的标准步骤了! 当然,网上自定义相机的文章多的去了,我是不可能再做老生常谈的事的,在这里我推荐一个很好用的第三方库,也许很多人已经了解过并且用过,没用过的同学可以试试,亲测好用. 废话不多说,先上源码地址 这里简单介绍一下用法: 1.在gradle里添加库的依赖:compile 'com.wonderk

  • Vue路由监听实现同页面动态加载的示例

    Vue路由监听实现同页面动态加载的示例

    场景分析 在系统中一个模块有三个子模块. 业务数据中可以直接根据类型去区分这个三个子模块的归属. 通常情况下.我们是写在同一个模块中然后去选择业务类型. 但是业主要求,将这个拆分成三个菜单.用户根据自己的需求去选择需要使用的模块. 这个三个菜单使用的是同一张数据表. 所以我们肯定只写一个 list,add,edit页面的. 然后根据进入页面的路由来判断属于哪一个分类.并跳转指定分类的 新增,编辑, 和调用对应的列表接口页面 开发 由于三个模块使用的相同的页面.所以需要配置三份路由.并且做出页面区

  • 使用vue与jquery实时监听用户输入状态的操作代码

    实现效果:input未输入值,按钮禁用 jquery操作代码: html <input type="text" name="" placeholder="请输入用户名" id="userName" > <button class="disabled" id="login">登录</button> css .disabled { pointer-even

  • Vue数据监听方法watch的使用

    Vue数据监听方法watch的使用

    watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来 当Vue视图中的数据变化时, 关联的函数会被执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监听方法watch的使用</title> <script src="https://cdn.bootcss.com/

随机推荐