最近的業務中涉及到這樣一個需求，線上培訓的系統需要知道使用者對某個線上預覽的頁面追蹤使用者的預覽時長。初步我們首ZvymZfeoyX先想到藉助 頁面的生命週期函式 mounted 和 destroyed，分別在其中加入開始計時和清除計時的邏輯，通過後臺的介面上報對應的培訓素材的時間資料，即可達到目的。

有了思路，我們就可以開始籌劃具體的程式碼。

定義開始結束計時函式

在 data 中定義我們通過變數定義計時器，這樣可以通過 this.timer 隨處可訪問，便於後面銷燬頁面的時候清除它。

duration 為時長的計數變數，初始化為 0，可根據計時器的第二個時間間隔引數，決定單位是秒還是毫秒。

export default {
  data() {
    return {
      tiZvymZfeoyXmer: null,duration: 0
    }
  },methods: {
    startTimer() {
      this.timer = setInterval(() => {
        console.log('觀看時長: ',this.duration)
        this.duration++
      },1000)
    },stopTimer() {
      clearIntervalwww.cppcns.com(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 生命週期函式監聽。如果是通過路由方法進行的跳轉，那麼我們需要在離開http://www.cppcns.com頁面的時候進行銷燬，方可再通過 destroyed 監聽到。

mounted() {
    windohttp://www.cppcns.comw.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 監聽使用者預覽時間內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！