Vue 頁(yè)面監聽(tīng)用戶(hù)預覽時(shí)間功能的實(shí)現代碼

最近的業(yè)務(wù)中涉及到這樣一個(gè)需求，在線(xiàn)培訓的系統需要知道用戶(hù)對某個(gè)在線(xiàn)預覽的頁(yè)面追蹤用戶(hù)的預覽時(shí)長(cháng)。初步我們首先想到借助 Vue 頁(yè)面的生命周期函數 mounted 和 destroyed，分別在其中加入開(kāi)始計時(shí)和清除計時(shí)的邏輯，通過(guò)后臺的接口上報對應的培訓素材的時(shí)間數據，即可達到目的。

有了思路，我們就可以開(kāi)始籌劃具體的代碼。

定義開(kāi)始結束計時(shí)函數

在 data 中定義我們通過(guò)變量定義計時(shí)器，這樣可以通過(guò) this.timer 隨處可訪(fǎng)問(wèn)，便于后面銷(xiāo)毀頁(yè)面的時(shí)候清除它。

duration 為時(shí)長(cháng)的計數變量，初始化為 0，可根據計時(shí)器的第二個(gè)時(shí)間間隔參數，決定單位是秒還是毫秒。

export default {
  data() {
    return {
      timer: null,
      duration: 0
    }
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        console.log('觀(guān)看時(shí)長(cháng): ', this.duration)
        this.duration++
      }, 1000)
    },
    stopTimer() {
      clearInterval(this.timer)
      this.updateViewHistory() // 上報數據接口
    },
    updateViewHistory() {
    // 上報接口邏輯代碼
    ....
    }
  }
}

在 startTimer 函數中我們順便打印出 duration 變量來(lái)驗證顯示的時(shí)間是否正確。

如何以及在哪調用

定義好了開(kāi)始結束的方法，我們就要開(kāi)始想在哪調用它們。因為預覽的頁(yè)面內容不是唯一的，是根據素材的 id 來(lái)獲取詳情進(jìn)行渲染的。如果我們把 startTimer 寫(xiě)在 mounted 生命周期里，那么當我們訪(fǎng)問(wèn)不同 id 的頁(yè)面的時(shí)候，無(wú)法正常切換我們想要的邏輯。

所以我選擇了通過(guò)監聽(tīng)路由中的 id 參數，來(lái)達到在預覽不同頁(yè)面時(shí)候來(lái)切換開(kāi)始和結束的邏輯

watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        if (to.params.id) this.trainingId = to.params.id
        this.startTimer()
      }
    }
  }

調用了開(kāi)始計時(shí)的方法，終于我們可以在 console 的 log 中可以看到輸出了當前的時(shí)長(cháng)

然后也是最后一步，我們需要在頁(yè)面銷(xiāo)毀的時(shí)候調用 stopTimer 函數來(lái)清除定時(shí)器，上報數據。

由于我們的預覽頁(yè)面是通過(guò) window.open 打開(kāi)的獨立的標簽頁(yè)，所以這里是通過(guò) destroyed 生命周期函數監聽(tīng)。如果是通過(guò)路由方法進(jìn)行的跳轉，那么我們需要在離開(kāi)頁(yè)面的時(shí)候進(jìn)行銷(xiāo)毀，方可再通過(guò) destroyed 監聽(tīng)到。

mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  }

通過(guò) window 的監聽(tīng)器方法來(lái)來(lái)間接調用 stopTimer 方法

methods: {
    beforeunloadHandler (e) {
      this.stopTimer()
    }
}

這里有人會(huì )問(wèn)為什么不直接在 destroyed 中調用 stopTimer 方法，這樣可以分離出特有的邏輯，不與 destroyed 中其它的邏輯混在一起。提高代碼的可讀性和維護性。

在寫(xiě)代碼的時(shí)候我們不僅要實(shí)現功能，還要想的更多一點(diǎn)，這就是普通和高手的區別。

到此這篇關(guān)于Vue 頁(yè)面監聽(tīng)用戶(hù)預覽時(shí)間的文章就介紹到這了,更多相關(guān)Vue 監聽(tīng)用戶(hù)預覽時(shí)間內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！