统计页面学习时长——停留时间

思路

页面进入记录开始时间，开启定时器记录时长
页面离开掉接口
1. 页面返回和浏览器返回都会执行 beforeDestroy，但是无法掉接口
2. 所以使用组件内路由守卫beforeRouteLeave，监听返回调取接口
3. 刷新页面不会执行beforeDestroy和beforeRouteLeave，所以需要监听页面刷新
4. 监听刷新掉接口会存在有时候接口没有掉成功就刷新完了重新加载了，导致接口没有成功
5. 所以在页面刷新的时候将学习时长存储，在mounted 判断本地存储有时长再调取接口

js 复制代码

 <div class="flex pt-10" style="height: 60px">
        <el-page-header @back="goBack" content="知识库"> </el-page-header>
        <div class="flex_r">已学习
        <span class="size-26 green bold ml-10"{{formattedTime}}</span>
    </div>
</div>
      
      
mounted() {
   if (localStorage.getItem("learnTime")) {
      this.setTime(localStorage.getItem("learnTime"));
      localStorage.removeItem("learnTime");
      clearInterval(this.timer); // 页面卸载前清除计时器
      // 组件销毁前，移除事件监听，防止内存泄漏
      window.removeEventListener("beforeunload", this.beforeunloadHandler);
    }
    this.startTime = new Date(); // 页面加载时记录时间
    this.startTimer(); // 开始计时器
    // 页面刷新检测不到beforeDestroy，使用此方法刷新更新视频进度
    window.addEventListener("beforeunload", this.beforeunloadHandler);
  },
  beforeDestroy() {
    console.log("beforeDestroy");
    clearInterval(this.timer); // 页面卸载前清除计时器
    // 组件销毁前，移除事件监听，防止内存泄漏
    window.removeEventListener("beforeunload", this.beforeunloadHandler);
  },
  // 虽然可以监听到beforeRouteLeave，但是无法调取接口
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave");
    this.$axios
      .put("/qualityTrain/duration/record", {
        duration: this.time,
      })
      .then((res) => {})
      .catch((err) => {})
      .finally(() => {
        next();
      });
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        const elapsedTime = new Date() - this.startTime; // 计算时间差
        const hours = Math.floor(elapsedTime / 3600000);
        const minutes = Math.floor((elapsedTime % 3600000) / 60000);
        const seconds = Math.floor((elapsedTime % 60000) / 1000);

        // 补零处理
        const formattedHours = String(hours).padStart(2, "0");
        const formattedMinutes = String(minutes).padStart(2, "0");
        const formattedSeconds = String(seconds).padStart(2, "0");
        this.time = parseInt(elapsedTime / 1000);
        this.formattedTime = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`; // 更新显示的时间
      }, 1000);
    },
    // 掉接口
    setTime(time) {
      if (time) {
        console.log(this.formattedTime, this.time, time);
      } else {
        console.log(this.formattedTime, this.time);
      }
    },
    beforeunloadHandler() {
      localStorage.setItem("learnTime", this.time);
    },
    goBack() {
      this.$router.go(-1);
    },
    
}