文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue页面监听用户预览时间功能怎么实现

2024-04-02 19:55

关注

这篇文章主要介绍“Vue页面监听用户预览时间功能怎么实现”,在日常操作中,相信很多人在Vue页面监听用户预览时间功能怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue页面监听用户预览时间功能怎么实现”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

定义开始结束计时函数

在 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 中可以看到输出了当前的时长

Vue页面监听用户预览时间功能怎么实现

然后也是最后一步,我们需要在页面销毁的时候调用 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页面监听用户预览时间功能怎么实现”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯