Vue頁(yè)面監(jiān)聽用戶預(yù)覽時(shí)間功能如何實(shí)現(xiàn)

這篇文章主要介紹“Vue頁(yè)面監(jiān)聽用戶預(yù)覽時(shí)間功能如何實(shí)現(xiàn)”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue頁(yè)面監(jiān)聽用戶預(yù)覽時(shí)間功能如何實(shí)現(xiàn)”文章能幫助大家解決問題。

首先想到借助 Vue 頁(yè)面的生命周期函數(shù) mounted 和 destroyed，分別在其中加入開始計(jì)時(shí)和清除計(jì)時(shí)的邏輯，通過后臺(tái)的接口上報(bào)對(duì)應(yīng)的培訓(xùn)素材的時(shí)間數(shù)據(jù)，即可達(dá)到目的。

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

在 data 中定義我們通過變量定義計(jì)時(shí)器，這樣可以通過 this.timer 隨處可訪問，便于后面銷毀頁(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問不同 id 的頁(yè)面的時(shí)候，無(wú)法正常切換我們想要的邏輯。

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

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

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

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

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

關(guān)于“Vue頁(yè)面監(jiān)聽用戶預(yù)覽時(shí)間功能如何實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。