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

這篇文章主要介紹“Vue頁(yè)面監(jiān)聽用戶預(yù)覽時(shí)間功能怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在Vue頁(yè)面監(jiān)聽用戶預(yù)覽時(shí)間功能怎么實(shí)現(xiàn)問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue頁(yè)面監(jiān)聽用戶預(yù)覽時(shí)間功能怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

定義開始結(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 變量來驗(yàn)證顯示的時(shí)間是否正確。

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

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

所以我選擇了通過監(jiān)聽路由中的 id 參數(shù)，來達(dá)到在預(yù)覽不同頁(yè)面時(shí)候來切換開始和結(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ù)來清除定時(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)聽器方法來來間接調(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)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！