Vue頁面監聽用戶預覽時間功能怎么實現

這篇文章主要介紹“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 中可以看到輸出了當前的時長

然后也是最后一步，我們需要在頁面銷毀的時候調用 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頁面監聽用戶預覽時間功能怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！