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

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

定義開始結(jié)束計(jì)時(shí)函數(shù)

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

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

export default {
  data() {
    return {
      timer: null,
      duration: 0
    }
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        console.log('觀看時(shí)長(zhǎng): ', this.duration)
        this.duration++
      }, 1000)
    },
    stopTimer() {
      clearInterval(this.timer)
      this.updateViewHistory() // 上報(bào)數(shù)據(jù)接口
    },
    updateViewHistory() {
    // 上報(bào)接口邏輯代碼
    ....
    }
  }
}

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

如何以及在哪調(diào)用

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

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

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

調(diào)用了開始計(jì)時(shí)的方法，終于我們可以在 console 的 log 中可以看到輸出了當(dāng)前的時(shí)長(zhǎng)

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

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

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

通過(guò) window 的監(jiān)聽器方法來(lái)來(lái)間接調(diào)用 stopTimer 方法

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

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

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

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