Vue page monitoring user preview time function implementation code

A recent business involves such a requirement that the online training system needs to know the user's preview time for a certain online preview page. Initially, we first thought of using the life cycle functions of the Vue page, mounted and destroyed , to add the logic of starting and clearing the timing, and report the time data of the corresponding training materials through the background interface to achieve the goal.

With an idea in mind, we can start planning the specific code.

Define the start and end timing functions

In data , we define the timer through a variable, so that it can be accessed everywhere through this.timer , which is convenient for clearing it when the page is destroyed later.

duration is a counting variable for the duration, which is initialized to 0. The unit can be determined as seconds or milliseconds based on the second time interval parameter of the timer.

export default {
  data() {
    return {
      timer: null,
      duration: 0
    }
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        console.log('Watching time: ', this.duration)
        this.duration++
      }, 1000)
    },
    stopTimer() {
      clearInterval(this.timer)
      this.updateViewHistory() // Report data interface},
    updateViewHistory() {
    // Reporting interface logic code....
    }
  }
}

In the startTimer function, we print out the duration variable to verify that the displayed time is correct.

How and where to call

After defining the start and end methods, we need to start thinking about where to call them. Because the preview page content is not unique, it is rendered based on the material's id to obtain details. If we write startTimer in the mounted lifecycle, then when we visit pages with different id , we cannot switch the logic we want normally.

So I chose to listen to the id parameter in the route to switch the start and end logic when previewing different pages.

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

The start timing method is called, and finally we can see the current duration output in console log

Then, as the last step, we need to call stopTimer function to clear the timer and report the data when the page is destroyed.

Since our preview page is an independent tab opened through window.open , it is monitored through the destroyed lifecycle function. If the jump is made through the routing method, we need to destroy it when leaving the page before we can listen to it through destroyed .

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

Indirectly call stopTimer method through the window listener method

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

Some people may ask why not call stopTimer method directly in destroyed , so that the unique logic can be separated and not mixed with other logic in destroyed . Improve code readability and maintainability.

When writing code, we not only have to implement the function, but also think more. This is the difference between ordinary people and experts.

This is the end of this article about Vue page monitoring user preview time. For more relevant Vue monitoring user preview time content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!